/* ============================================================
   Musorum Design System v3.0 — Apple/Google-style
   Glassmorphism · Elevation · Micro-interactions · 8pt grid
   Подключение: <link rel="stylesheet" href="/static/css/musorum.css">
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root {
  color-scheme: light;
  --primary: var(--ui-primary);
  --primary-dark: var(--ui-primary-600);
  --primary-light: var(--ui-brand-400);
  --primary-rgb: 16, 185, 129;
  --accent: var(--ui-warning);
  --danger: var(--ui-danger);
  --success: var(--ui-success);
  --warning: var(--ui-warning);
  --info: var(--ui-info);

  --gradient-primary: linear-gradient(135deg, var(--ui-primary) 0%, var(--ui-primary-600) 100%);
  --gradient-warm: linear-gradient(135deg, var(--ui-warning) 0%, var(--ui-warning-700) 100%);
  --gradient-danger: linear-gradient(135deg, var(--ui-danger) 0%, var(--ui-danger) 100%);
  --gradient-dark: linear-gradient(135deg, #052e16 0%, var(--ui-ink-soft) 100%);

  --text-primary: var(--ui-ink-soft);
  --text-secondary: #166534;
  --text-tertiary: #4b5563;
  --text-muted: var(--ui-text-3);
  --text-light: var(--ui-brand-50);

  --bg-primary: var(--ui-brand-50);
  --bg-secondary: #ffffff;
  --bg-secondary-rgb: 255, 255, 255;
  --bg-tertiary: var(--ui-primary-soft);
  --bg-surface: #ffffff;

  --border-light: #bbf7d0;
  --border-light-rgb: 187, 247, 208;
  --border: #86efac;
  --border-dark: #4ade80;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 4px rgba(0,0,0,.04);
  --shadow: 0 4px 12px rgba(0,0,0,.05);
  --shadow-md: 0 8px 24px rgba(0,0,0,.07);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.09);
  --shadow-xl: 0 32px 64px rgba(0,0,0,.12);
  --shadow-glow: 0 0 40px rgba(var(--primary-rgb), .18);

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --transition-fast: 200ms cubic-bezier(.4,0,.2,1);
  --transition: 350ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 500ms cubic-bezier(.4,0,.2,1);

  --header-height: 64px;
  --bottomnav-height: 64px;
  --container-max: 1200px;
  --tap-min: 44px;
  --gutter: 1rem;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --primary: var(--ui-brand-400);
  --primary-dark: var(--ui-primary);
  --primary-light: #6ee7b7;
  --primary-rgb: 52, 211, 153;
  --accent: var(--ui-warning);
  --danger: var(--ui-danger);
  --success: #4ade80;
  --warning: var(--ui-warning);
  --info: var(--ui-info);
  --gradient-primary: linear-gradient(135deg, var(--ui-brand-400) 0%, var(--ui-primary) 100%);
  --gradient-warm: linear-gradient(135deg, var(--ui-warning) 0%, var(--ui-warning-700) 100%);
  --gradient-danger: linear-gradient(135deg, var(--ui-danger) 0%, var(--ui-danger) 100%);
  --gradient-dark: linear-gradient(135deg, #0a1a0f 0%, #052e16 100%);

  --text-primary: #e8f5ee;
  --text-secondary: #cbd5d1;
  --text-tertiary: #9ca3af;
  --text-muted: #9ca3af;
  --text-light: var(--ui-brand-50);

  --bg-primary: #0a0f0c;
  --bg-secondary: #131a16;
  --bg-secondary-rgb: 19, 26, 22;
  --bg-tertiary: #1c2621;
  --bg-surface: #131a16;
  --bg-elevated: #1a2320;

  --border-light: #243129;
  --border-light-rgb: 36, 49, 41;
  --border: #31473a;
  --border-dark: #3f5c49;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 4px rgba(0,0,0,.4);
  --shadow: 0 4px 12px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
  --shadow-xl: 0 32px 64px rgba(0,0,0,.65);
  --shadow-glow: 0 0 40px rgba(var(--primary-rgb), .12);
}

/* ---------- 2. База / reset / mobile-first ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(var(--primary-rgb), .15);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga' 1, 'kern' 1;
  transition: background-color var(--transition), color var(--transition);
}
img, video, iframe { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
  font-weight: 700; line-height: 1.25; letter-spacing: -.02em;
  color: var(--text-primary); margin: 0 0 .6em;
}
h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(1.4rem, 4vw, 2.1rem); font-weight: 700; letter-spacing: -.025em; }
h3 { font-size: clamp(1.2rem, 3.4vw, 1.55rem); font-weight: 650; }
h4 { font-size: 1.1rem; font-weight: 600; }
p { color: var(--text-tertiary); margin: 0 0 1em; }
a { color: var(--primary-dark); text-decoration: none; transition: color var(--transition-fast); }
[data-bs-theme="dark"] a { color: var(--primary-light); }
a:hover { text-decoration: underline; }
strong { font-weight: 700; }
small { font-size: .85em; color: var(--text-muted); }
::selection { background: rgba(var(--primary-rgb), .2); color: var(--text-primary); }
::-moz-selection { background: rgba(var(--primary-rgb), .2); color: var(--text-primary); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* Focus */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--gradient-dark); color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---------- 3. Контейнеры ---------- */
.mu-container {
  width: 100%; max-width: var(--container-max);
  margin-inline: auto; padding-inline: var(--gutter);
}
.mu-page { padding-block: .75rem 5.5rem; }
@media (min-width: 768px) { .mu-page { padding-block: 1.5rem 2rem; } }

.mu-avatar-letter {
  width: 28px; height: 28px; background: var(--gradient-primary); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-weight: 700; font-size: .75rem; flex-shrink: 0;
}
.mu-drawer-sep { height: 1px; background: var(--border-light); margin: .4rem .75rem; list-style: none; }
.social-link {
  width: 40px; height: 40px; background: var(--bg-tertiary); border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary); text-decoration: none; transition: all var(--transition-fast);
}
.social-link:hover { color: var(--primary); background: var(--bg-surface); }

body.hide-footer .mu-footer { display: none; }
body.layout-map .mu-footer { display: none; }
body.layout-map .mu-page { padding: 0; }
body.layout-map .mu-container,
body.layout-map .content-card,
body.layout-flush .content-card {
  max-width: none; padding: 0; background: transparent; box-shadow: none; border: none; border-radius: 0;
}
body.layout-sidebar .content-card {
  padding: 0; background: transparent; box-shadow: none; border: none;
}
body.layout-map.has-bottomnav #map,
body.layout-map.has-bottomnav .loader {
  inset: var(--header-height) 0 calc(var(--bottomnav-height) + env(safe-area-inset-bottom)) 0;
}
body.layout-map.has-bottomnav .legend-toggle-btn,
body.layout-map.has-bottomnav .fullscreen-btn {
  bottom: calc(var(--bottomnav-height) + 1.25rem + env(safe-area-inset-bottom));
}
body.layout-map.has-bottomnav .filters-toggle-btn,
body.layout-map.has-bottomnav .locate-btn {
  bottom: calc(var(--bottomnav-height) + 1.25rem + var(--tap-min) + .5rem + env(safe-area-inset-bottom));
}
.mu-map-add {
  position: fixed; z-index: 800; top: calc(var(--header-height) + .75rem); right: 1rem;
}
.mu-sidebar {
  width: 260px; flex-shrink: 0;
  background: var(--bg-surface); border-right: 1px solid var(--border-light);
  display: flex; flex-direction: column;
}

/* ---------- 4. Glassmorphism ---------- */
.glass {
  background: rgba(var(--bg-surface-rgb, 255,255,255), .72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(var(--primary-rgb), .12);
}
[data-bs-theme="dark"] .glass {
  background: rgba(var(--bg-secondary-rgb, 19,26,22), .72);
  border-color: rgba(var(--primary-rgb), .1);
}

.glass-card {
  background: rgba(var(--bg-surface-rgb, 255,255,255), .78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(var(--primary-rgb), .1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
[data-bs-theme="dark"] .glass-card {
  background: rgba(var(--bg-secondary-rgb, 19,26,22), .78);
}
.glass-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gradient-primary); opacity: .7;
}

/* Glass header */
.glass-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(var(--bg-secondary-rgb, 255,255,255), .75);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(var(--border-light-rgb, 187,247,208), .5);
  padding-top: env(safe-area-inset-top);
}
[data-bs-theme="dark"] .glass-header {
  background: rgba(var(--bg-secondary-rgb, 19,26,22), .75);
  border-bottom-color: rgba(var(--border-light-rgb, 36,49,41), .5);
}

/* ---------- 5. Карточки ---------- */
.mu-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.1rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.mu-card:hover { box-shadow: var(--shadow-md); border-color: rgba(var(--primary-rgb), .25); }
@media (min-width: 768px) { .mu-card { padding: 1.5rem; } }
.mu-card-accent::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-primary);
}
.feature-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  transition: all var(--transition);
  box-shadow: var(--shadow);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(var(--primary-rgb), .3); }
.feature-icon {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff; background: var(--gradient-primary);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), .3); margin-bottom: 1.25rem;
}
.stats-number { font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 800; color: var(--primary-dark); line-height: 1; letter-spacing: -.03em; }
[data-bs-theme="dark"] .stats-number { color: var(--primary-light); }
.stats-label { color: var(--text-muted); font-size: .9rem; font-weight: 500; }

/* Hero */
.hero-section {
  background: var(--gradient-primary); color: #fff;
  border-radius: var(--radius-xl); padding: 2rem 1.25rem;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.15);
}
@media (min-width: 768px) { .hero-section { padding: 3rem 2.5rem; } }
.hero-section::after {
  content: ''; position: absolute; width: 350px; height: 350px;
  right: -120px; top: -120px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 70%);
  border-radius: 50%;
}
.hero-section h1, .hero-section h2, .hero-section h3,
.hero-section h4, .hero-section h5, .hero-section h6,
.hero-section p { color: #fff; }
.hero-section .text-muted, .hero-section .text-secondary { color: rgba(255,255,255,.9) !important; }
.hero-section .btn-primary-custom { background: var(--ui-surface); color: var(--primary-dark) !important; border: none; box-shadow: 0 4px 16px rgba(0,0,0,.15); }

/* Hero в стиле Google/Карт: поиск + чипы категорий */
.mu-hero-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 992px) { .mu-hero-grid { grid-template-columns: 7fr 5fr; } }
.mu-hero-eyebrow { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.25); color: #fff; }
.mu-hero-brand { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.mu-hero-brand img { filter: drop-shadow(0 4px 12px rgba(0,0,0,.2)); }
.mu-hero-brand h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; margin: 0; }
.mu-hero-tagline { color: rgba(255,255,255,.9); font-size: 1.1rem; margin: 0; }
.mu-hero-desc { color: rgba(255,255,255,.92); font-size: 1.02rem; max-width: 60ch; }
.mu-searchbar {
  display: flex; align-items: center; gap: .5rem;
  background: var(--ui-surface); border-radius: var(--radius-full);
  padding: .35rem .35rem .35rem 1rem; margin-bottom: .9rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.18); max-width: 560px;
  border: 1px solid rgba(0,0,0,.06);
}
.mu-searchbar-icon { color: var(--ui-primary-600); }
.mu-searchbar-input { flex: 1; border: none; outline: none; font-size: 1rem; color: var(--ui-text); background: var(--ui-surface); min-width: 0; }
.mu-searchbar-input::placeholder { color: var(--ui-text-3); }
.mu-searchbar-btn { border-radius: var(--radius-full); flex-shrink: 0; }
.mu-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.mu-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: var(--radius-full);
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.mu-chip:hover { background: rgba(255,255,255,.3); color: #fff; }
.mu-chip i { font-size: .8rem; }
.mu-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.mu-hero-join { background: rgba(0,0,0,.22); color: #fff !important; border: 1px solid rgba(255,255,255,.35); }
.mu-hero-join:hover { background: rgba(0,0,0,.32); color: #fff !important; }
.mu-hero-points { display: flex; flex-wrap: wrap; gap: 1.25rem; color: rgba(255,255,255,.9); font-size: .9rem; }
.mu-hero-side { min-width: 0; }
.mu-hero-logo {
  width: 72px; height: 72px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.mu-hero-logo img { width: 56px; height: 56px; object-fit: contain; }
.mu-tip-card {
  border-radius: 22px; overflow: hidden;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
  padding: 1.4rem; display: flex; flex-direction: column; gap: .9rem;
}
.mu-tip-head { display: flex; align-items: center; gap: .65rem; }
.mu-tip-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient-primary); color: #fff; font-size: 1.05rem;
  border-radius: 12px; box-shadow: 0 4px 14px rgba(var(--ui-primary-rgb),.45);
}
.mu-tip-title {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ui-primary-soft);
}
.mu-tip-text {
  min-height: 72px; font-size: 1rem; line-height: 1.6; color: #fff; margin: 0;
}
.mu-tip-btn {
  align-self: flex-start; display: inline-flex; align-items: center;
  min-height: var(--tap-min); padding: .55rem 1.2rem;
  background: var(--ui-surface); color: var(--ui-link); border: none; border-radius: var(--radius-full);
  font-weight: 700; font-size: .86rem; cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  font-family: inherit;
}
.mu-tip-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.mu-tip-btn:active { transform: scale(.97); }

/* Hero в стиле gdeplastic: тёмный космос, пилюля-бейдж, счётчики */
.hero-space {
  background:
    radial-gradient(600px 300px at 85% -5%, rgba(var(--ui-primary-rgb),.22), transparent 70%),
    radial-gradient(500px 260px at 5% 110%, rgba(14,165,233,.14), transparent 70%),
    linear-gradient(180deg, #0b1220 0%, #0a0f16 100%);
  border: 1px solid rgba(255,255,255,.09);
  color: #fff;
}
.hero-space::after {
  background:
    radial-gradient(circle, rgba(var(--ui-primary-rgb),.12) 0%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px);
  width: 100%; height: 100%; right: 0; top: 0;
}
.hero-space h1, .hero-space h2, .hero-space h3, .hero-space p { color: #fff; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ui-primary-soft); background: rgba(var(--ui-primary-rgb),.12);
  border: 1px solid rgba(var(--ui-primary-rgb),.4);
  padding: .4rem .95rem; border-radius: var(--radius-full); margin-bottom: 1rem;
}
.hero-stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 1.5rem; }
.hero-stat { min-width: 110px; }
.hero-stat-num { font-size: 1.9rem; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; }
.hero-stat-num i { font-style: normal; color: var(--primary-light); }
.hero-stat-label { font-size: .76rem; color: rgba(255,255,255,.65); margin-top: .3rem; }
@media (max-width: 768px) {
  .hero-stats { gap: 1.1rem; }
  .hero-stat-num { font-size: 1.5rem; }
}

/* Empty state */
.empty-state {
  text-align: center; padding: 3rem 1.5rem;
  border: 1.5px dashed var(--border); border-radius: var(--radius-xl);
  color: var(--text-muted); background: var(--bg-secondary);
}
.empty-state i { font-size: 2.5rem; color: var(--primary); opacity: .5; margin-bottom: 1rem; }
.empty-state h3 { color: var(--text-secondary); margin-bottom: .5rem; }

/* Section styling */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary-dark);
  background: rgba(var(--primary-rgb), .1);
  border: 1px solid rgba(var(--primary-rgb), .2);
  padding: .35rem .85rem; border-radius: var(--radius-full);
  margin-bottom: .75rem;
}
[data-bs-theme="dark"] .section-eyebrow { color: var(--primary-light); }
.section-title { display: flex; align-items: center; gap: .6rem; margin-bottom: .25rem; }
.section-title i { color: var(--primary); }
.section-subtitle { color: var(--text-muted); margin-bottom: 1.5rem; max-width: 44rem; line-height: 1.7; }

/* ---------- 6. Кнопки ---------- */
.btn, .mu-btn, .btn-primary-custom {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap-min); padding: .7rem 1.35rem;
  font-weight: 600; font-size: .95rem; line-height: 1.3;
  border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; text-decoration: none !important;
  transition: all var(--transition-fast);
  touch-action: manipulation; user-select: none;
  max-width: 100%; position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .6s ease;
}
.btn:hover::after { transform: translateX(100%); }
.btn:active { transform: scale(.97); }
.btn-primary, .mu-btn-primary, .btn-primary-custom {
  background: var(--gradient-primary); color: #fff !important; border: none;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), .3);
  font-weight: 650;
}
.btn-primary:hover { box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.btn-primary:active { transform: scale(.97); }
.btn-outline, .mu-btn-outline {
  background: transparent; border: 1.5px solid var(--border);
  color: var(--text-primary); font-weight: 550;
}
.btn-outline:hover { border-color: var(--primary); background: rgba(var(--primary-rgb), .06); color: var(--primary-dark); }
.btn-outline-primary { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); color: #fff; }
.btn-danger, .mu-btn-danger { background: var(--gradient-danger); color: #fff !important; border: none; box-shadow: 0 4px 14px rgba(239,68,68,.25); }
.btn-sm { min-height: 36px; padding: .4rem .85rem; font-size: .85rem; }
.btn-lg { min-height: 52px; padding: .85rem 1.5rem; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn-icon { width: var(--tap-min); height: var(--tap-min); padding: 0; border-radius: var(--radius); }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Animated gradient button */
.btn-animated {
  background-size: 200% auto;
  animation: gradientShift 3s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Ripple */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.25);
  transform: scale(0); animation: rippleAnim .5s ease-out;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }
[data-bs-theme="light"] .ripple { background: rgba(var(--primary-rgb), .15); }

/* ---------- 7. Формы ---------- */
.form-label {
  font-weight: 600; font-size: .85rem; color: var(--text-secondary);
  margin-bottom: .4rem; display: block; letter-spacing: .01em;
}
.form-control, .form-select,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"], input[type="url"],
textarea, select {
  width: 100%; min-height: var(--tap-min);
  background: var(--bg-surface); color: var(--text-primary);
  border: 1.5px solid var(--border-light); border-radius: var(--radius);
  padding: .7rem .95rem; font-size: 16px;
  font-family: inherit; transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
}
textarea { min-height: 120px; resize: vertical; }
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12), var(--shadow-xs);
  background: var(--bg-surface);
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .7; }
.form-control:disabled { opacity: .5; background: var(--bg-tertiary); }
.form-check-input { width: 22px; height: 22px; accent-color: var(--primary-dark); cursor: pointer; }
.form-check-label { cursor: pointer; color: var(--text-secondary); font-size: .9rem; }
.form-text { color: var(--text-muted); font-size: .82rem; margin-top: .3rem; }
.form-hint { font-size: .8rem; color: var(--text-muted); margin-top: .25rem; }
.form-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.form-row > .form-group { flex: 1; min-width: 200px; }

/* Input with icon */
.input-group { position: relative; display: flex; align-items: center; }
.input-group .form-control { padding-left: 2.75rem; }
.input-group .input-icon { position: absolute; left: .9rem; color: var(--text-muted); pointer-events: none; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, rgba(var(--primary-rgb), .08) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%; animation: skeletonLoad 1.5s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeletonLoad { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-text { height: 16px; margin-bottom: 8px; width: 80%; }
.skeleton-title { height: 24px; margin-bottom: 12px; width: 60%; }
.skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; }
.skeleton-card { height: 200px; border-radius: var(--radius-lg); }

/* ---------- 8. Алерты ---------- */
.alert {
  border-radius: var(--radius); border: 1px solid transparent;
  font-size: .92rem; padding: .85rem 1rem;
  display: flex; align-items: flex-start; gap: .65rem;
  line-height: 1.5; transition: all var(--transition-fast);
}
.alert-dismissible { padding-right: 2.5rem; position: relative; }
.alert-success { background: rgba(var(--primary-rgb), .08); border-color: rgba(var(--primary-rgb), .25); color: var(--text-primary); }
.alert-danger { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.25); color: var(--danger); }
.alert-warning { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.3); color: #b45309; }
.alert-info { background: rgba(14,165,233,.08); border-color: rgba(14,165,233,.3); color: #0369a1; }
.alert-dismissible .btn-close { position: absolute; right: .75rem; top: .6rem; }

/* Toast */
.mu-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; max-width: calc(100vw - 2rem); }
.mu-toast {
  background: var(--bg-secondary); border: 1px solid var(--border-light);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 1rem 1.25rem; min-width: 300px; max-width: 420px;
  display: flex; align-items: center; gap: .75rem;
  animation: toastIn .3s ease forwards; border-left: 4px solid var(--primary);
}
.mu-toast.toast-exit { animation: toastOut .3s ease forwards; }
.mu-toast .toast-title { font-weight: 700; font-size: .9rem; color: var(--text-primary); }
.mu-toast .toast-body { font-size: .85rem; color: var(--text-tertiary); }
@keyframes toastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }

/* ---------- 9. Шапка / навигация ---------- */
.mu-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(var(--bg-secondary-rgb, 255,255,255), .75);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(var(--border-light-rgb, 187,247,208), .5);
  padding-top: env(safe-area-inset-top);
}
.mu-header-inner {
  max-width: var(--container-max); margin: 0 auto;
  min-height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .4rem 1rem;
}
.mu-logo { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.25rem; color: var(--text-primary); text-decoration: none; letter-spacing: -.01em; }
.mu-logo img { width: 36px; height: 36px; object-fit: contain; }
.text-gradient, .logo-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Mobile menu toggle button */
.mu-menu-toggle {
  display: flex !important;
  align-items: center; justify-content: center;
  width: var(--tap-min); height: var(--tap-min);
  background: var(--bg-tertiary); border: 1px solid var(--border-light);
  border-radius: var(--radius); color: var(--text-primary);
  font-size: 1.1rem; cursor: pointer;
  transition: all var(--transition-fast);
}
.mu-menu-toggle:hover { background: var(--gradient-primary); color: #fff; border-color: transparent; }
.mu-menu-toggle:active { transform: scale(.92); }
@media (min-width: 900px) { .mu-menu-toggle { display: none !important; } }

/* Desktop nav — самодостаточно, без зависимости от Bootstrap */
.mu-nav-desktop { display: none; align-items: center; gap: .2rem; }
@media (min-width: 900px) { .mu-nav-desktop { display: flex; } }
.mu-nav-list, .mu-actions-list {
  display: flex; flex-direction: row; align-items: center; gap: .25rem;
  list-style: none; margin: 0; padding: 0;
}
.mu-nav-list > li, .mu-actions-list > li { list-style: none; margin: 0; padding: 0; }
.mu-nav-list > li::marker, .mu-actions-list > li::marker,
.mu-drawer-list > li::marker, .mu-footer-links > li::marker { content: ''; }
.mu-drawer-list { display: grid; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.mu-drawer-list > li { list-style: none; margin: 0; padding: 0; }
.mu-nav-link {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem; border-radius: var(--radius);
  color: var(--text-tertiary); font-weight: 600; font-size: .875rem; text-decoration: none;
  min-height: var(--tap-min); transition: all var(--transition-fast);
}
.mu-nav-link:hover, .mu-nav-link.active { background: var(--bg-tertiary); color: var(--text-primary); }
.mu-nav-link i { color: var(--primary); font-size: .95rem; }

/* Dropdown в шапке — страховка, если Bootstrap CSS недоступен */
.mu-header .dropdown { position: relative; list-style: none; }
.mu-header .dropdown-menu { list-style: none; }
.mu-header .dropdown-menu > li { list-style: none; }

/* Header actions (auth buttons / avatar) — без зависимости от Bootstrap */
.mu-header-actions { display: flex; align-items: center; gap: .25rem; }
.mu-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border-light); }
.mu-avatar { display: flex; align-items: center; gap: .5rem; }

/* Auth buttons in header */
.mu-auth-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: var(--radius); font-weight: 600; font-size: .875rem;
  text-decoration: none; min-height: var(--tap-min); transition: all var(--transition-fast);
}
.mu-auth-btn.login { background: transparent; border: 1.5px solid var(--border); color: var(--text-primary); }
.mu-auth-btn.login:hover { border-color: var(--primary); color: var(--primary-dark); }
.mu-auth-btn.register { background: var(--gradient-primary); color: #fff !important; border: none; box-shadow: 0 2px 10px rgba(var(--primary-rgb), .25); }
.mu-auth-btn.register:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); }

/* Mobile menu — скрыто по умолчанию, открывается классом .open */
.mu-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100;
  width: min(86vw, 340px); background: var(--bg-secondary);
  border-left: 1px solid var(--border-light);
  transform: translateX(105%); visibility: hidden; pointer-events: none;
  transition: transform var(--transition), visibility var(--transition);
  overflow-y: auto; padding: 1.25rem; -webkit-overflow-scrolling: touch;
}
.mu-drawer.open { transform: none; visibility: visible; pointer-events: auto; box-shadow: var(--shadow-xl); }
.mu-overlay {
  position: fixed; inset: 0; z-index: 1050; background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);
}
.mu-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }
.mu-drawer-link {
  display: flex; align-items: center; gap: .8rem;
  min-height: var(--tap-min); padding: .75rem .85rem; border-radius: var(--radius);
  color: var(--text-tertiary); font-weight: 600; text-decoration: none;
  transition: all var(--transition-fast);
}
.mu-drawer-link:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.mu-drawer-link i { width: 22px; color: var(--primary); text-align: center; }
.mu-drawer-divider { height: 1px; background: var(--border-light); margin: .75rem 0; }

/* Mobile bottom nav */
.mu-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; justify-content: space-around; align-items: stretch;
  background: rgba(var(--bg-secondary-rgb, 255,255,255), .8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(var(--border-light-rgb, 187,247,208), .5);
  box-shadow: 0 -4px 20px rgba(0,0,0,.06);
  padding-bottom: env(safe-area-inset-bottom);
}
.mu-bottomnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--bottomnav-height); padding: .35rem .1rem;
  color: var(--text-muted); text-decoration: none; font-size: .65rem; font-weight: 600;
  transition: color var(--transition-fast);
}
.mu-bottomnav a i { font-size: 1.25rem; line-height: 1; transition: transform var(--transition-fast); }
.mu-bottomnav a.active, .mu-bottomnav a:hover { color: var(--primary-dark); }
[data-bs-theme="dark"] .mu-bottomnav a.active, [data-bs-theme="dark"] .mu-bottomnav a:hover { color: var(--primary-light); }
.mu-bottomnav a.active i { transform: translateY(-2px); }
@media (min-width: 900px) { .mu-bottomnav { display: none; } }
@media (max-width: 899px) {
  body.has-bottomnav { padding-bottom: calc(var(--bottomnav-height) + 12px + env(safe-area-inset-bottom)); }
  .theme-toggle.floating { bottom: calc(var(--bottomnav-height) + 1rem + env(safe-area-inset-bottom)); }
}

/* Mobile profile in drawer */
.mu-drawer-profile {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .85rem;
}
.mu-avatar-sm {
  width: 36px; height: 36px; background: var(--gradient-primary);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .85rem; flex-shrink: 0;
}

/* Theme toggle */
.theme-toggle.floating { position: fixed; right: 1rem; bottom: 1rem; z-index: 900; }
.theme-btn {
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--gradient-primary); color: #fff; font-size: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); touch-action: manipulation;
  transition: all var(--transition-fast);
}
.theme-btn:hover { transform: rotate(30deg) scale(1.1); box-shadow: var(--shadow-xl); }
.theme-btn:active { transform: scale(.92); }

/* ---------- 10. Таблицы ---------- */
.mu-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--border-light); background: var(--bg-surface); }
table.table, .mu-table { width: 100%; border-collapse: collapse; margin: 0; font-size: .92rem; min-width: 560px; }
table.table th, .mu-table th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); background: var(--bg-tertiary);
  padding: .7rem .85rem; white-space: nowrap; border-bottom: 1px solid var(--border-light); font-weight: 700;
}
table.table td, .mu-table td { padding: .7rem .85rem; border-bottom: 1px solid var(--border-light); color: var(--text-primary); vertical-align: middle; }
table.table tr:last-child td { border-bottom: none; }
table.table tr:hover td { background: rgba(var(--primary-rgb), .02); }

/* ---------- 11. Бейджи / пагинация ---------- */
.badge { padding: .25rem .6rem; font-weight: 700; font-size: .68rem; border-radius: var(--radius-full); letter-spacing: .02em; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
.badge.bg-primary, .mu-badge-green { background: var(--gradient-primary) !important; color: #fff; }
.badge.bg-success { background: var(--gradient-success) !important; }
.badge.bg-warning { background: var(--gradient-warm) !important; }
.badge.bg-danger { background: var(--gradient-danger) !important; }
.pagination { display: flex; justify-content: center; gap: .25rem; margin-top: 1.5rem; flex-wrap: wrap; }
.page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 .75rem;
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius); color: var(--text-tertiary); text-decoration: none;
  font-size: .9rem; font-weight: 500; transition: all var(--transition-fast);
}
.page-link:hover { background: var(--bg-tertiary); border-color: var(--primary); color: var(--primary-dark); }
.page-item.active .page-link { background: var(--gradient-primary); border-color: transparent; color: #fff; }

/* ---------- 12. Списки / dropdown / list ---------- */
.list-group-item { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-light); border-radius: var(--radius) !important; padding: .75rem 1rem; }
.dropdown-menu {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .4rem;
  animation: dropdownIn .2s ease;
}
@keyframes dropdownIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .85rem; min-height: var(--tap-min); border-radius: var(--radius-sm);
  color: var(--text-tertiary); font-size: .9rem; font-weight: 500; text-decoration: none;
  transition: all var(--transition-fast);
}
.dropdown-item:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.dropdown-item i { color: var(--primary); width: 20px; text-align: center; }
.dropdown-divider { border: none; border-top: 1px solid var(--border-light); margin: .4rem 0; }

/* ---------- 13. Листы / комментарии ---------- */
.comment-thread { margin-top: 1rem; }
.comment-item {
  background: var(--bg-surface); border-radius: var(--radius);
  padding: 1rem; margin-bottom: .6rem; border: 1px solid var(--border-light);
  transition: border-color var(--transition-fast);
}
.comment-item:hover { border-color: rgba(var(--primary-rgb), .2); }
.comment-item[depth="0"] { margin-left: 0; }
.comment-item[depth="1"] { margin-left: 1.5rem; }
.comment-item[depth="2"] { margin-left: 2rem; }
.comment-item[depth="3"] { margin-left: 2rem; }
@media (max-width: 768px) {
  .comment-item[depth="1"] { margin-left: .75rem; }
  .comment-item[depth="2"] { margin-left: 1.5rem; }
  .comment-item[depth="3"] { margin-left: 1.5rem; }
}
.comment-header { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; flex-wrap: wrap; }
.comment-avatar {
  width: 36px; height: 36px; background: var(--gradient-primary); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.comment-author { font-weight: 650; color: var(--text-primary); font-size: .875rem; }
.comment-time { font-size: .75rem; color: var(--text-muted); }
.comment-content { color: var(--text-tertiary); line-height: 1.6; margin-bottom: .6rem; word-wrap: break-word; }
.comment-actions { display: flex; gap: .75rem; font-size: .75rem; }
.comment-action { background: none; border: none; color: var(--text-muted); cursor: pointer; transition: color var(--transition-fast); padding: .25rem .5rem; border-radius: var(--radius-sm); font-weight: 500; }
.comment-action:hover { background: var(--bg-tertiary); color: var(--primary); }

/* ---------- 14. Форум ---------- */
.topic-item {
  background: var(--bg-surface); border-radius: var(--radius);
  padding: 1rem; margin-bottom: .6rem; transition: all var(--transition-fast);
  border: 1px solid var(--border-light);
}
.topic-item:hover { border-color: rgba(var(--primary-rgb), .3); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.topic-title { font-size: 1.05rem; font-weight: 650; margin-bottom: .4rem; }
.topic-title a { color: var(--text-primary); text-decoration: none; transition: color var(--transition-fast); }
.topic-title a:hover { color: var(--primary); }
.topic-meta { font-size: .75rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.topic-tag, .category-badge {
  display: inline-block; padding: .1rem .5rem; border-radius: var(--radius-full);
  font-size: .68rem; font-weight: 500; background: var(--bg-tertiary); color: var(--text-secondary);
}
.forum-card { background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow); overflow: hidden; }
.forum-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-primary); }
.forum-card-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-light); background: var(--bg-tertiary); }
.forum-card-body { padding: 1.5rem; }
.new-topic-btn {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; background: var(--gradient-primary); border: none;
  border-radius: var(--radius-full); color: white; font-weight: 600;
  font-size: .875rem; cursor: pointer; transition: all var(--transition-fast); text-decoration: none;
  min-height: var(--tap-min);
}
.new-topic-btn:hover { box-shadow: 0 4px 14px rgba(var(--primary-rgb), .35); transform: translateY(-2px); }
.sort-nav {
  background: var(--bg-surface); border-radius: var(--radius); padding: .4rem;
  margin-bottom: 1.25rem; border: 1px solid var(--border-light);
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
.sort-link {
  padding: .35rem .9rem; border-radius: var(--radius-full); font-size: .85rem;
  color: var(--text-tertiary); text-decoration: none; transition: all var(--transition-fast); font-weight: 500;
}
.sort-link:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.sort-link.active { background: var(--gradient-primary); color: #fff; }

/* Vote */
.vote-column { min-width: 56px; text-align: center; }
.vote-button { background: none; border: none; font-size: 1.15rem; cursor: pointer; color: var(--text-muted); transition: all var(--transition-fast); padding: .2rem; border-radius: var(--radius-sm); }
.vote-button:hover { background: var(--bg-tertiary); }
.vote-button.upvote:hover { color: var(--success); }
.vote-button.downvote:hover { color: var(--danger); }
.vote-button.active-up { color: var(--success); }
.vote-button.active-down { color: var(--danger); }
.vote-score { font-weight: 700; font-size: 1.1rem; margin: .25rem 0; color: var(--text-primary); }

/* Quote */
blockquote.quote {
  background: var(--bg-tertiary); border-left: 3px solid var(--primary);
  padding: .75rem 1rem; margin: .75rem 0; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .875rem; color: var(--text-tertiary); line-height: 1.5;
}

/* ---------- 15. Футер ---------- */
.mu-footer { background: var(--bg-surface); border-top: 1px solid var(--border-light); margin-top: auto; }
.mu-footer-grid { max-width: var(--container-max); margin: 0 auto; padding: 2rem 1rem 1rem; display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mu-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .mu-footer-grid { grid-template-columns: repeat(4, 1fr); } }
.mu-footer h5 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; color: var(--text-secondary); font-weight: 700; }
.mu-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.mu-footer-links a { color: var(--text-muted); font-size: .85rem; text-decoration: none; padding: .15rem 0; display: inline-block; transition: color var(--transition-fast); font-weight: 500; }
.mu-footer-links a:hover { color: var(--primary); }
.mu-footer-bottom { text-align: center; color: var(--text-muted); font-size: .75rem; padding: 1rem; border-top: 1px solid var(--border-light); }

/* ---------- 16. Утилиты ---------- */
/* Ограничение ширины текстового контента — не прижат к краю */
.mu-content {
  max-width: 68ch;
  margin-inline: auto;
  padding-inline: .5rem;
}
.mu-content-wide {
  max-width: 88ch;
  margin-inline: auto;
  padding-inline: .5rem;
}
/* Текстовые элементы не растягиваются на всю ширину */
.mu-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  text-align: left;
  line-height: 1.7;
}
.mu-text p, .mu-text h1, .mu-text h2, .mu-text h3,
.mu-text h4, .mu-text h5, .mu-text h6, .mu-text li {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Базовые heading не растягиваются */
h1, h2, h3, h4, h5, h6 {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
/* Списки не растягиваются */
ul, ol {
  max-width: 100%;
  overflow-wrap: break-word;
}
/* Контейнер с одинаковыми блоками в ряду (Grid stretch) */
.mu-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; }
.mu-row > * { flex: 1 1 200px; }
@media (max-width: 560px) { .mu-row > * { width: 100%; } }
.mu-grid-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 640px) { .mu-grid-cards.cols-2, .mu-grid-cards.cols-3, .mu-grid-cards.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mu-grid-cards.cols-3 { grid-template-columns: repeat(3, 1fr); } .mu-grid-cards.cols-4 { grid-template-columns: repeat(4, 1fr); } }
/* Унифицированный блок — все блоки в ряду одинаковой высоты */
.mu-block {
  display: flex; flex-direction: column;
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  overflow: hidden;
}
.mu-block-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-light); background: var(--bg-tertiary); }
.mu-block-body { padding: 1.25rem; flex: 1 1 auto; }
.mu-block-footer { padding: .75rem 1.25rem; border-top: 1px solid var(--border-light); background: var(--bg-tertiary); }
/* Сетка с одинаковыми высотами ячеек */
.mu-equal-grid { display: grid; gap: 1rem; align-items: stretch; }
.mu-equal-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.mu-equal-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mu-equal-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .mu-equal-grid.cols-2, .mu-equal-grid.cols-3, .mu-equal-grid.cols-4 { grid-template-columns: 1fr; } }
/* Контентная карточка с ограничением ширины текста */
.content-card {
  background: var(--bg-secondary); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.5rem; position: relative; overflow: hidden;
}
.content-card .mu-content, .content-card .mu-text {
  margin-inline: auto;
}
/* Карточка с равномерным контентом */
.card-uniform {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.card-uniform > * { flex: 1 1 auto; }
/* Ограничение ширины изображений внутри текстовых блоков */
.mu-content img, .mu-text img, .mu-text video {
  max-width: 100%; height: auto; border-radius: var(--radius);
}
/* Кнопки в ряду — одинаковые размеры */
.mu-row-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.mu-row-btns > .btn, .mu-row-btns > .mu-btn { flex: 1 1 auto; min-width: 120px; }
@media (max-width: 560px) { .mu-row-btns > .btn, .mu-row-btns > .mu-btn { width: 100%; } }
/* Контейнер с тенью и скруглением для единообразия */
.mu-panel {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.5rem;
}
/* Scrollbar */
.mu-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mu-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mu-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.shadow-hover { transition: box-shadow var(--transition); }
.shadow-hover:hover { box-shadow: var(--shadow-lg); }
.text-shimmer { background: linear-gradient(90deg, var(--text-tertiary) 30%, var(--text-primary) 50%, var(--text-tertiary) 70%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 2s ease infinite; }
@keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
.mu-flash { display: grid; gap: .5rem; margin-bottom: 1rem; }
.mu-flash:empty { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------- 17. Анимации ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes gradientShift { 0% { background-position: 0% center; } 50% { background-position: 100% center; } 100% { background-position: 0% center; } }
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
@keyframes dropdownIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes skeletonLoad { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }

.animate-fade { animation: fadeIn .4s ease; }
.animate-fade-up { animation: fadeInUp .5s ease; }
.animate-scale { animation: scaleIn .4s ease; }
.animate-slide-up { animation: slideUp .5s ease; }

/* Page transition wrapper */
.page-enter { animation: fadeInUp .4s ease; }
.page-exit { animation: fadeOut .3s ease; }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Hover lift for cards */
.lift-hover { transition: transform var(--transition), box-shadow var(--transition); }
.lift-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Interactive row */
.interactive-row { cursor: pointer; transition: all var(--transition-fast); }
.interactive-row:hover { background: rgba(var(--primary-rgb), .04); }

/* Glow dot */
.glow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px rgba(var(--primary-rgb), .5); display: inline-block; }
.glow-dot.offline { background: var(--text-muted); box-shadow: none; }

/* Loading spinner */
.mu-spinner { width: 32px; height: 32px; border: 3px solid var(--border-light); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; margin: 1rem auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Divider */
.mu-divider { height: 1px; background: var(--border-light); margin: 1.5rem 0; }

/* Tag / Pill */
.mu-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .65rem; border-radius: var(--radius-full); font-size: .78rem; font-weight: 600; background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); }
[data-bs-theme="dark"] .mu-pill { color: var(--primary-light); }

/* ---------- 19. Форум header/layout ---------- */
.forum-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(var(--bg-secondary-rgb, 255,255,255), .8);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(var(--border-light-rgb, 187,247,208), .5);
  height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem;
}
.forum-main { flex: 1; padding-top: var(--header-height); min-height: calc(100vh - var(--header-height)); }
.forum-container { max-width: var(--container-max); margin: 0 auto; padding: 1rem; }
.back-button {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; background: var(--bg-tertiary);
  border: 1px solid var(--border-light); border-radius: var(--radius-full);
  color: var(--text-secondary); font-weight: 600; font-size: .85rem;
  text-decoration: none; transition: all var(--transition-fast);
}
.back-button:hover { background: var(--gradient-primary); color: #fff; border-color: transparent; }
.header-title { font-weight: 650; color: var(--text-primary); display: flex; align-items: center; gap: .4rem; }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.theme-btn-header {
  width: 40px; height: 40px; border: none;
  background: var(--bg-tertiary); border: 1px solid var(--border-light);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 1rem; cursor: pointer;
  transition: all var(--transition-fast);
}
.theme-btn-header:hover { background: var(--gradient-primary); color: #fff; border-color: transparent; transform: rotate(15deg); }
.new-topic-btn span { display: inline; }
@media (max-width: 768px) { .new-topic-btn span { display: none; } .new-topic-btn { width: 44px; height: 44px; border-radius: 50%; padding: 0; justify-content: center; } }

/* ---------- 20. Страницы ошибок ---------- */
.error-page {
  background: var(--gradient-primary);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.error-card {
  background: var(--bg-surface); border-radius: var(--radius-xl);
  padding: clamp(2rem, 5vw, 3.5rem); box-shadow: var(--shadow-xl);
  text-align: center; max-width: 520px; width: 100%;
  animation: slideUp .5s ease; position: relative; overflow: hidden;
}
.error-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); }
.error-code {
  font-size: clamp(4rem, 15vw, 7rem); font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1; margin-bottom: .5rem; letter-spacing: -.03em;
}
.error-icon-wrap {
  width: 72px; height: 72px; background: var(--gradient-primary);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.75rem; box-shadow: 0 8px 24px rgba(var(--ui-primary-rgb),.35);
  margin-bottom: 1.25rem;
}
.error-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: .75rem; }
.error-message { color: var(--text-tertiary); font-size: 1rem; margin-bottom: 1.5rem; line-height: 1.6; }
.error-details {
  background: var(--bg-tertiary); border-radius: var(--radius);
  padding: 1rem; margin-bottom: 1.5rem; font-family: monospace;
  font-size: .85rem; color: var(--text-secondary); border: 1px solid var(--border-light); text-align: left;
}
.error-id {
  background: var(--bg-tertiary); padding: .35rem .75rem; border-radius: var(--radius-sm);
  font-family: monospace; font-size: .8rem; color: var(--text-muted); display: inline-block; margin-bottom: 1.25rem;
}
.btn-home {
  background: var(--gradient-primary); color: #fff !important; border: none;
  padding: .75rem 2rem; border-radius: var(--radius); font-weight: 650;
  text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
  transition: all var(--transition-fast); min-height: var(--tap-min);
}
.btn-home:hover { box-shadow: var(--shadow-glow); transform: translateY(-2px); color: #fff !important; }
.btn-back {
  background: var(--bg-surface); color: var(--primary-dark); border: 1.5px solid var(--primary);
  padding: .65rem 1.5rem; border-radius: var(--radius); font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
  transition: all var(--transition-fast); margin-right: .5rem; min-height: var(--tap-min);
}
.btn-back:hover { background: var(--primary); color: #fff; }
.toggle-stack { color: var(--primary); cursor: pointer; font-size: .85rem; margin-top: 1rem; display: inline-block; font-weight: 500; }
.toggle-stack:hover { text-decoration: underline; }
.stack-trace { background: var(--bg-surface); color: var(--text-tertiary); padding: 1rem; border-radius: var(--radius); font-family: monospace; font-size: .8rem; text-align: left; max-height: 200px; overflow: auto; margin-top: 1rem; display: none; border: 1px solid var(--border-light); }
.stack-trace.show { display: block; }

/* ---------- 21. Страница карты /map/ ---------- */
.map-header {
  position: sticky; top: 0; z-index: 1000; height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .4rem 1rem;
  background: rgba(var(--bg-secondary-rgb, 255, 255, 255), .8);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border-light);
}
.add-point-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; min-height: var(--tap-min);
  background: var(--gradient-primary); color: #fff !important; border: none;
  border-radius: var(--radius-full); font-weight: 600; font-size: .85rem;
  text-decoration: none; cursor: pointer; transition: all var(--transition-fast);
  box-shadow: 0 2px 10px rgba(var(--primary-rgb), .25);
}
.add-point-btn:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); color: #fff !important; }
#map {
  position: fixed; inset: var(--header-height) 0 0 0; z-index: 1;
  background: var(--bg-tertiary);
}
/* Лоадер карты */
.loader {
  position: fixed; inset: var(--header-height) 0 0 0; z-index: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: var(--bg-primary); color: var(--text-secondary);
}
.loader-spinner {
  width: 48px; height: 48px; border-radius: 50%;
  border: 4px solid var(--border-light); border-top-color: var(--primary);
  animation: spin .8s linear infinite;
}
.loading-progress {
  position: fixed; top: var(--header-height); left: 0; z-index: 950;
  height: 3px; width: 0; background: var(--gradient-primary);
  transition: width var(--transition-fast);
}
/* Кнопки поверх карты */
.legend-toggle-btn, .filters-toggle-btn, .locate-btn, .fullscreen-btn {
  position: fixed; z-index: 800;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: var(--tap-min); padding: .55rem .95rem;
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border-light); border-radius: var(--radius-full);
  box-shadow: var(--shadow-md); font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: all var(--transition-fast);
}
.legend-toggle-btn:hover, .filters-toggle-btn:hover, .locate-btn:hover, .fullscreen-btn:hover {
  border-color: var(--primary); color: var(--primary-dark);
}
.legend-toggle-btn { left: 1rem; bottom: 1.5rem; }
.filters-toggle-btn { left: 1rem; bottom: calc(1.5rem + var(--tap-min) + .5rem); }
.locate-btn { right: 1rem; bottom: calc(1.5rem + var(--tap-min) + .5rem); }
.locate-btn span, .fullscreen-btn span { display: none; }
.fullscreen-btn { right: 1rem; bottom: 1.5rem; }
@media (min-width: 768px) {
  .locate-btn span, .fullscreen-btn span { display: inline; }
}
/* Панели легенды и фильтров */
.legend-panel, .filters-panel {
  position: fixed; z-index: 850; top: calc(var(--header-height) + 4.5rem); left: 1rem;
  width: min(86vw, 320px); max-height: calc(100dvh - var(--header-height) - 9rem);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.legend-panel.open, .filters-panel.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.legend-header, .filters-header {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--border-light); background: var(--bg-tertiary);
}
.legend-header h5, .filters-header h5 { margin: 0; font-size: .95rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.legend-content, .filters-content { padding: 1rem; overflow-y: auto; }
.legend-section h6 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: .6rem; font-weight: 700; }
.legend-item { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; font-size: .85rem; color: var(--text-secondary); }
.legend-item i { width: 20px; text-align: center; }
.legend-footer { padding: .75rem 1rem; border-top: 1px solid var(--border-light); }
.attribution { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--text-muted); }
.update-info { font-size: .72rem; color: var(--text-muted); margin-top: .25rem; }
.filters-footer { padding: .85rem 1rem; border-top: 1px solid var(--border-light); }
.filters-footer .d-flex { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.points-count { font-size: .82rem; color: var(--text-secondary); }
.color-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: var(--shadow-xs); }
.filter-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; min-height: 40px;
  background: var(--bg-tertiary); color: var(--text-secondary);
  border: 1px solid var(--border-light); border-radius: var(--radius-full);
  font-size: .82rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast);
}
.filter-btn:hover { border-color: var(--primary); }
.filter-btn.active { background: var(--gradient-primary); color: #fff; border-color: transparent; }
/* Маркеры и попапы */
.custom-marker { background: transparent; border: none; }
.point-popup { min-width: 200px; max-width: 260px; }
.point-popup h4 { font-size: .95rem; margin-bottom: .4rem; }
.point-popup p { font-size: .82rem; margin-bottom: .35rem; color: var(--text-secondary); }
.popup-footer { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border-light); text-align: center; }
.popup-footer a { color: var(--primary); text-decoration: none; font-weight: 600; font-size: .85rem; }
/* Leaflet в тёмной теме */
[data-bs-theme="dark"] .leaflet-bar a { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-light); }
[data-bs-theme="dark"] .leaflet-bar a:hover { background: var(--bg-tertiary); color: var(--primary); }
[data-bs-theme="dark"] .leaflet-popup-content-wrapper { background: var(--bg-surface); color: var(--text-primary); }
[data-bs-theme="dark"] .leaflet-popup-tip { background: var(--bg-surface); }
[data-bs-theme="dark"] .leaflet-popup-close-button { color: var(--text-muted); }
[data-bs-theme="dark"] .leaflet-control-attribution { background: rgba(var(--bg-secondary-rgb, 19, 26, 22), .8); color: var(--text-muted); }
[data-bs-theme="dark"] .leaflet-control-attribution a { color: var(--primary); }
[data-bs-theme="dark"] .marker-cluster-small,
[data-bs-theme="dark"] .marker-cluster-medium,
[data-bs-theme="dark"] .marker-cluster-large { filter: brightness(.9); }

/* ---------- 21b. Leaflet общие ---------- */
.leaflet-container { background: var(--bg-surface) !important; border-radius: var(--radius); }
.leaflet-control-zoom a { min-width: var(--tap-min) !important; min-height: var(--tap-min) !important; line-height: var(--tap-min) !important; font-size: 1.1rem; }
.leaflet-popup-content-wrapper { border-radius: var(--radius) !important; }
.leaflet-popup-content { margin: .75rem 1rem !important; font-size: .9rem; }
.leaflet-popup-close-button { font-size: 1.2rem; }
.map-legend { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1rem; }
.map-legend h5 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }

/* ---------- 22. Bootstrap 5.3 модалки ---------- */
.modal-content { border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow-xl); }
.modal-header { border-bottom: 1px solid var(--border-light); padding: 1.25rem 1.5rem; }
.modal-title { font-weight: 700; font-size: 1.15rem; color: var(--text-primary); }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--border-light); padding: 1rem 1.5rem; gap: .5rem; }
.btn-close { filter: invert(.4); }
[data-bs-theme="dark"] .btn-close { filter: invert(.8); }

/* ---------- 23. Рейтинг ---------- */
.rating-stars { display: inline-flex; gap: .15rem; }
.rating-star { color: var(--border); cursor: pointer; transition: color var(--transition-fast); font-size: 1.1rem; }
.rating-star.active { color: var(--accent); }
.rating-star:hover { color: var(--accent); }
.rating-star.filled { color: var(--accent); }

/* ---------- 24. Платежные карты ---------- */
.payment-card {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 1.5rem; transition: all var(--transition);
  box-shadow: var(--shadow);
}
.payment-card:hover { box-shadow: var(--shadow-md); border-color: rgba(var(--primary-rgb), .2); }
.payment-card.primary { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .2); }
.wallet-card {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 1.5rem; transition: all var(--transition);
  box-shadow: var(--shadow);
}
.wallet-card:hover { box-shadow: var(--shadow-md); }
.wallet-card .wallet-balance { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.wallet-card .wallet-label { font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.wallet-transaction { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border-light); }
.wallet-transaction:last-child { border-bottom: none; }

/* ---------- 25. Настройки ---------- */
.settings-section { margin-bottom: 2rem; }
.settings-section h4 { font-size: 1rem; font-weight: 650; color: var(--text-primary); margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--border-light); }
.settings-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius); margin-bottom: .5rem; transition: all var(--transition-fast);
}
.settings-item:hover { border-color: rgba(var(--primary-rgb), .2); }
.settings-item .settings-label { font-weight: 500; color: var(--text-primary); font-size: .9rem; }
.settings-item .settings-desc { font-size: .8rem; color: var(--text-muted); }

/* ---------- 26. Услуги/Обучение/О проекте ---------- */
.service-card {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 1.5rem; transition: all var(--transition);
  box-shadow: var(--shadow);
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: rgba(var(--primary-rgb), .2); }
.learning-card {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 1.25rem; margin-bottom: .75rem; transition: all var(--transition-fast);
}
.learning-card:hover { border-color: rgba(var(--primary-rgb), .2); box-shadow: var(--shadow-sm); }
.about-card { background: var(--bg-surface); border-radius: var(--radius-lg); padding: 2rem; border: 1px solid var(--border-light); }

/* ---------- 27. Админка ---------- */
.admin-stat { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1.25rem; text-align: center; box-shadow: var(--shadow); }
.admin-stat .stat-number { font-size: 1.75rem; font-weight: 800; color: var(--primary-dark); }
.admin-stat .stat-label { font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- 28. Страницы ошибок/статусов ---------- */
.ddos-challenge-card, .device-blocked-card, .rate-limit-card, .maintenance-card, .access-denied-card {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); padding: 2rem; text-align: center;
  box-shadow: var(--shadow-lg); max-width: 500px; margin: 2rem auto;
  animation: scaleIn .4s ease;
}
.ddos-challenge-card h2, .device-blocked-card h2, .rate-limit-card h2, .maintenance-card h2, .access-denied-card h2 {
  font-size: 1.25rem; font-weight: 700; margin-bottom: .75rem;
}
.ddos-challenge-card p, .device-blocked-card p, .rate-limit-card p, .maintenance-card p, .access-denied-card p {
  color: var(--text-tertiary); margin-bottom: 1.5rem;
}
.pending-spinner { width: 48px; height: 48px; border: 3px solid var(--border-light); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; margin: 1rem auto; }

/* ---------- 29. Auth страницы ---------- */
.login-error-card, .reg-success-card, .reg-error-card, .verify-registration-card, .verification-resent-card, .verification-error-card {
  background: var(--bg-surface); border-radius: var(--radius-xl); padding: 2rem; text-align: center; box-shadow: var(--shadow-lg); max-width: 440px; margin: 2rem auto; animation: scaleIn .4s ease;
}
.twofa-setup-card, .twofa-verify-card, .twofa-manage-card, .twofa-backup-codes-card { background: var(--bg-surface); border-radius: var(--radius-lg); padding: 2rem; border: 1px solid var(--border-light); box-shadow: var(--shadow); max-width: 440px; margin: 2rem auto; }
.twofa-qr { background: #fff; padding: 1rem; border-radius: var(--radius); display: inline-block; }

/* ---------- 30. AI сканер ---------- */
.ai-scanner-container { max-width: 600px; margin: 0 auto; }
.ai-scanner-result { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.5rem; margin-top: 1rem; box-shadow: var(--shadow); }

/* ---------- 31. Сообщения ---------- */
.messages-page { max-width: 900px; margin: 0 auto; }
.messenger-list-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius); margin-bottom: .5rem; transition: all var(--transition-fast); cursor: pointer; }
.messenger-list-item:hover { border-color: rgba(var(--primary-rgb), .2); background: rgba(var(--primary-rgb), .02); }
.messenger-avatar { width: 44px; height: 44px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.messenger-name { font-weight: 600; color: var(--text-primary); font-size: .95rem; }
.messenger-preview { font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messenger-time { font-size: .7rem; color: var(--text-muted); flex-shrink: 0; }
.chat-container { max-width: 700px; margin: 0 auto; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.chat-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; gap: .75rem; }
.chat-messages { padding: 1rem; height: clamp(400px, 60vh, 600px); overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; }
.chat-input { padding: .75rem 1rem; border-top: 1px solid var(--border-light); display: flex; gap: .5rem; }
.chat-input input { flex: 1; }
.message-bubble { max-width: 75%; padding: .6rem .9rem; border-radius: var(--radius); font-size: .9rem; line-height: 1.5; }
.message-bubble.sent { background: var(--gradient-primary); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.message-bubble.received { background: var(--bg-tertiary); color: var(--text-primary); margin-right: auto; border-bottom-left-radius: 4px; }
.message-meta { font-size: .7rem; color: var(--text-muted); margin-top: .2rem; }
.conversation-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border-light); transition: background var(--transition-fast); }
.conversation-item:hover { background: rgba(var(--primary-rgb), .02); }
.search-result { padding: .75rem 1rem; border-bottom: 1px solid var(--border-light); transition: background var(--transition-fast); }
.search-result:hover { background: rgba(var(--primary-rgb), .02); }

/* ---------- 32. Поддержка ---------- */
.support-ticket-item { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1rem; margin-bottom: .5rem; transition: all var(--transition-fast); cursor: pointer; }
.support-ticket-item:hover { border-color: rgba(var(--primary-rgb), .2); box-shadow: var(--shadow-sm); }
.support-ticket-status { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: var(--radius-full); font-size: .75rem; font-weight: 600; }
.support-ticket-status.open { background: rgba(14,165,233,.1); color: #0369a1; }
.support-ticket-status.closed { background: rgba(34,197,94,.1); color: #16a34a; }
.support-ticket-status.pending { background: rgba(245,158,11,.1); color: #b45309; }

/* ---------- 33. Объявления ---------- */
.ad-card { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: all var(--transition); }
.ad-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ad-card img { width: 100%; height: 200px; object-fit: cover; }
.ad-card-body { padding: 1.25rem; }
.ad-price { font-size: 1.25rem; font-weight: 700; color: var(--primary-dark); }
.ad-location { font-size: .8rem; color: var(--text-muted); }
.ad-stats { display: flex; gap: 1rem; font-size: .8rem; color: var(--text-muted); }
.ad-stats span { display: flex; align-items: center; gap: .3rem; }
.ad-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border-radius: var(--radius-full); font-size: .7rem; font-weight: 600; }
.ad-badge.premium { background: var(--gradient-warm); color: #fff; }
.ad-badge.featured { background: var(--gradient-primary); color: #fff; }
.ad-detail { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); }
.ad-analytics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.ad-stat-card { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1rem; text-align: center; box-shadow: var(--shadow-sm); }
.ad-stat-card .ad-stat-number { font-size: 1.5rem; font-weight: 800; color: var(--primary-dark); }
.ad-stat-card .ad-stat-label { font-size: .75rem; color: var(--text-muted); }

/* ---------- 34. Точки/Карта ---------- */
.point-card { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1rem; margin-bottom: .5rem; transition: all var(--transition-fast); }
.point-card:hover { border-color: rgba(var(--primary-rgb), .2); box-shadow: var(--shadow-sm); }
.point-detail { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); }
.point-detail img { width: 100%; height: 300px; object-fit: cover; border-radius: var(--radius); margin-bottom: 1rem; }
.point-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; color: var(--text-muted); margin-top: .5rem; }
.point-meta span { display: flex; align-items: center; gap: .3rem; }

/* ---------- 35. Пользователи ---------- */
.user-card { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1rem; display: flex; align-items: center; gap: 1rem; transition: all var(--transition-fast); }
.user-card:hover { border-color: rgba(var(--primary-rgb), .2); box-shadow: var(--shadow-sm); }
.user-avatar { width: 48px; height: 48px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
.user-info { flex: 1; min-width: 0; }
.user-name { font-weight: 650; color: var(--text-primary); font-size: .95rem; }
.user-role { font-size: .75rem; color: var(--text-muted); }
.user-badges { display: flex; gap: .3rem; margin-top: .25rem; }
.user-status { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.user-status.online { background: var(--ui-success); }
.user-status.offline { background: var(--text-muted); }
.user-detail { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); }
.user-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; margin: 1rem 0; }
.user-stat { text-align: center; padding: .75rem; background: var(--bg-tertiary); border-radius: var(--radius); }
.user-stat .user-stat-number { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.user-stat .user-stat-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; }

/* ---------- 36. Кошелек/Финансы ---------- */
.wallet-page { max-width: 800px; margin: 0 auto; }
.wallet-balance-card { background: var(--gradient-primary); border-radius: var(--radius-xl); padding: 2rem; color: #fff; box-shadow: 0 8px 30px rgba(var(--ui-primary-rgb),.3); }
.wallet-balance-card .balance-label { opacity: .8; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.wallet-balance-card .balance-amount { font-size: 2.5rem; font-weight: 800; margin: .5rem 0; }
.wallet-transactions { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.wallet-transaction { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-light); }
.wallet-transaction:last-child { border-bottom: none; }
.wallet-transaction .wt-amount { font-weight: 700; font-size: 1rem; margin-left: auto; }
.wallet-transaction .wt-amount.plus { color: var(--ui-success); }
.wallet-transaction .wt-amount.minus { color: var(--danger); }
.wallet-transaction .wt-date { font-size: .75rem; color: var(--text-muted); }
.wallet-transaction .wt-desc { font-size: .9rem; color: var(--text-primary); }

/* ---------- 37. Страница оплаты ---------- */
.payment-page { max-width: 500px; margin: 2rem auto; }
.payment-method { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--border-light); border-radius: var(--radius); margin-bottom: .5rem; cursor: pointer; transition: all var(--transition-fast); }
.payment-method:hover { border-color: var(--primary); background: rgba(var(--primary-rgb), .02); }
.payment-method.selected { border-color: var(--primary); background: rgba(var(--primary-rgb), .05); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .15); }
.payment-icon { width: 48px; height: 48px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.payment-success-page, .payment-cancel-page { text-align: center; padding: 4rem 2rem; }
.payment-success-page .success-icon, .payment-cancel-page .cancel-icon { width: 80px; height: 80px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 1.5rem; }
.payment-success-page .success-icon { background: var(--gradient-success); color: #fff; box-shadow: 0 8px 24px rgba(34,197,94,.35); }
.payment-cancel-page .cancel-icon { background: var(--gradient-danger); color: #fff; box-shadow: 0 8px 24px rgba(239,68,68,.35); }

/* ---------- 38. Продвижение/Модерация ---------- */
.promote-card { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); }
.moderation-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--border-light); border-radius: var(--radius); margin-bottom: .5rem; transition: all var(--transition-fast); }
.moderation-item:hover { border-color: rgba(var(--primary-rgb), .2); }
.moderation-actions { display: flex; gap: .5rem; margin-left: auto; }
.become-moderator-card { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: 2rem; text-align: center; box-shadow: var(--shadow-lg); max-width: 500px; margin: 2rem auto; }
.user-karma { display: flex; align-items: center; gap: .5rem; }
.karma-score { font-size: 1.5rem; font-weight: 800; color: var(--accent); }
.karma-label { font-size: .75rem; color: var(--text-muted); }

/* ---------- 39. Загрузка изображений ---------- */
.upload-area { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 2rem; text-align: center; cursor: pointer; transition: all var(--transition-fast); }
.upload-area:hover { border-color: var(--primary); background: rgba(var(--primary-rgb), .04); }
.upload-area.dragover { border-color: var(--primary); background: rgba(var(--primary-rgb), .08); }
.upload-area i { font-size: 2rem; color: var(--text-muted); margin-bottom: .5rem; }
.upload-preview { width: 100px; height: 100px; border-radius: var(--radius); object-fit: cover; }
.upload-progress { height: 4px; background: var(--border-light); border-radius: var(--radius-full); overflow: hidden; margin-top: .5rem; }
.upload-progress-bar { height: 100%; background: var(--gradient-primary); transition: width var(--transition); }

/* ---------- 40. Общие утилиты ---------- */
.text-success { color: var(--ui-success) !important; }
.text-danger { color: var(--ui-danger) !important; }
.text-warning { color: var(--ui-warning) !important; }
.text-info { color: var(--ui-info) !important; }
.bg-success-light { background: rgba(34,197,94,.1); }
.bg-danger-light { background: rgba(239,68,68,.08); }
.bg-warning-light { background: rgba(245,158,11,.08); }
.bg-info-light { background: rgba(14,165,233,.08); }
.border-0 { border: none !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.shadow-none { box-shadow: none !important; }
.d-flex-center { display: flex; align-items: center; justify-content: center; }
.flex-column { flex-direction: column; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.p-1 { padding: .5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.w-100 { width: 100%; }
.text-center { text-align: center; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }
.font-weight-800 { font-weight: 800; }
.small { font-size: .85rem; }
.text-muted { color: var(--text-muted); }
.fw-bold { font-weight: 700 !important; }
.me-2 { margin-right: .5rem; }
.me-1 { margin-right: .25rem; }
.ms-2 { margin-left: .5rem; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-none { display: none; }

/* ---------- 41. Тач-устройства / движение / печать ---------- */
@media (hover: none) and (pointer: coarse) {
  .btn:hover, .mu-btn:hover, .feature-card:hover, .lift-hover:hover, .topic-item:hover, .service-card:hover, .ad-card:hover, .point-card:hover, .user-card:hover, .settings-item:hover, .moderation-item:hover, .messenger-list-item:hover, .conversation-item:hover { transform: none; }
  .btn:hover::after { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}
@media print {
  .mu-header, .mu-footer, .mu-bottomnav, .theme-toggle, .mu-drawer, .mu-overlay { display: none !important; }
  body { background: #fff; color: #000; }
  .glass { background: #fff !important; backdrop-filter: none !important; }
  .forum-header { position: relative; }
  .forum-main { padding-top: 0; }
}

/* ============================================================
   МОБИЛЬНАЯ ОПТИМИЗАЦИЯ (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  /* Шрифт */
  html { font-size: 14px; }
  body { font-size: .9rem; line-height: 1.6; }
  h1 { font-size: 1.45rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1.05rem; }
  h4 { font-size: .95rem; }
  p { font-size: .88rem; }

  /* Отступы */
  .mu-container { padding-inline: .65rem; }
  .mu-page { padding-block: .5rem 4.5rem; }
  .content-card { padding: 1rem; border-radius: var(--radius); }

  /* Header */
  .mu-header-inner { padding: .3rem .5rem; min-height: 52px; }
  .mu-logo { font-size: 1.05rem; }
  .mu-logo img { width: 28px; height: 28px; }
  .mu-nav-link { padding: .45rem .6rem; font-size: .82rem; min-height: 44px; }
  .mu-nav-link span { display: none; }
  .mu-nav-link i { margin: 0; }
  .mu-auth-btn { padding: .45rem .75rem; font-size: .8rem; min-height: 44px; }
  .mu-auth-btn span { display: none; }
  .mu-auth-btn i { margin: 0; }
  .mu-bottomnav a { font-size: .6rem; min-height: 50px; }
  .mu-bottomnav a i { font-size: 1.1rem; }

  /* Buttons */
  .btn { padding: .6rem .9rem; font-size: .85rem; min-height: 44px; }
  .btn-lg { padding: .75rem 1rem; font-size: .9rem; min-height: 48px; }
  .btn-sm { padding: .4rem .75rem; font-size: .8rem; min-height: 38px; }

  /* Forms */
  .form-control { padding: .6rem .8rem; font-size: 16px; min-height: 44px; }
  .form-label { font-size: .8rem; }
  .form-row { flex-direction: column; gap: .5rem; }
  .form-row > .form-group { min-width: 100%; }

  /* Grids */
  .mu-grid-cards { gap: .65rem; grid-template-columns: 1fr !important; }
  .mu-equal-grid { gap: .65rem; grid-template-columns: 1fr !important; }
  .mu-row { gap: .35rem; }
  .mu-row > * { min-width: 100% !important; flex-basis: 100% !important; }
  .mu-row-btns > .btn, .mu-row-btns > .mu-btn { width: 100%; flex-basis: 100%; }

  /* Cards */
  .mu-card { padding: .85rem; border-radius: var(--radius); }
  .feature-card { padding: 1.25rem; }
  .feature-icon { width: 44px; height: 44px; font-size: 1.1rem; }
  .forum-card-header { padding: .85rem; flex-direction: column; }
  .forum-card-body { padding: .85rem; }
  .topic-item { padding: .85rem; }
  .comment-item { padding: .85rem; margin-left: .25rem !important; }
  .comment-item[depth="1"] { margin-left: .5rem !important; }
  .comment-item[depth="2"] { margin-left: .75rem !important; }
  .comment-item[depth="3"] { margin-left: .75rem !important; }

  /* Messages */
  .message-bubble { max-width: 90%; font-size: .85rem; }
  .messenger-list-item { padding: .65rem .85rem; gap: .5rem; }
  .messenger-avatar { width: 38px; height: 38px; font-size: .9rem; }
  .chat-messages { padding: .65rem; }
  .chat-input { padding: .65rem .85rem; flex-wrap: wrap; }
  .chat-input input { min-height: 44px; }

  /* Navigation */
  .mu-drawer { width: 90vw; padding: 1rem; }
  .mu-drawer-link { min-height: 48px; padding: .7rem .85rem; }
  .back-button span { display: none; }
  .back-button { padding: .45rem .75rem; }
  .header-title span { display: none; }
  .new-topic-btn { width: 44px; height: 44px; border-radius: 50%; padding: 0; justify-content: center; }
  .new-topic-btn span { display: none !important; }

  /* Footer */
  .mu-footer-grid { gap: 1.25rem; padding: 1.25rem .65rem .75rem; }
  .mu-footer h5 { font-size: .72rem; }
  .mu-footer-links a { font-size: .8rem; }
  .mu-footer-bottom { font-size: .68rem; padding: .75rem; }

  /* Error pages */
  .error-card { padding: 1.5rem; border-radius: var(--radius-lg); }
  .error-code { font-size: 3.5rem; }
  .error-title { font-size: 1.2rem; }
  .error-message { font-size: .9rem; }

  /* Admin */
  .admin-stat { padding: .85rem; }
  .admin-stat .stat-number { font-size: 1.35rem; }
  .admin-stat .stat-label { font-size: .7rem; }

  /* Ads */
  .ad-card img { height: 150px; }
  .ad-card-body { padding: 1rem; }
  .ad-price { font-size: 1.1rem; }
  .ad-stats { flex-wrap: wrap; gap: .5rem; }

  /* Points */
  .point-card { padding: .85rem; }
  .point-detail { padding: 1.25rem; }
  .point-detail img { height: 180px; }

  /* Users */
  .user-card { padding: .75rem; gap: .75rem; }
  .user-avatar { width: 40px; height: 40px; font-size: .95rem; }
  .user-detail { padding: 1.25rem; }
  .user-stats { grid-template-columns: repeat(2, 1fr); }

  /* Wallet */
  .wallet-balance-card { padding: 1.25rem; }
  .wallet-balance-card .balance-amount { font-size: 1.75rem; }

  /* Payments */
  .payment-page { padding: 1rem; margin: 1rem auto; }
  .payment-method { padding: .75rem; }

  /* Settings */
  .settings-item { padding: .65rem .85rem; }
  .settings-item .settings-label { font-size: .85rem; }
  .settings-item .settings-desc { font-size: .75rem; }
  .settings-section { margin-bottom: 1.25rem; }

  /* TwoFA */
  .twofa-setup-card, .twofa-verify-card { padding: 1.25rem; }

  /* Support */
  .support-ticket-item { padding: .65rem .85rem; }

  /* Upload */
  .upload-area { padding: 1.25rem; }
  .upload-area i { font-size: 1.5rem; }

  /* Content width */
  .mu-content { max-width: 100%; padding-inline: .25rem; }
  .mu-content-wide { max-width: 100%; padding-inline: .25rem; }
  .content-card { padding: .85rem; }
}

/* ============================================================
   ПЛАНШЕТ (481px — 768px)
   ============================================================ */
@media (min-width: 481px) and (max-width: 768px) {
  html { font-size: 15px; }
  .mu-container { padding-inline: .85rem; }
  .mu-page { padding-block: .75rem 5rem; }
  .content-card { padding: 1.25rem; }

  .mu-header-inner { padding: .4rem .75rem; }
  .mu-logo { font-size: 1.15rem; }
  .mu-nav-link { padding: .5rem .75rem; font-size: .85rem; }
  .mu-auth-btn { padding: .5rem .9rem; font-size: .85rem; }
  .mu-bottomnav a { font-size: .65rem; }

  .btn { padding: .65rem 1.05rem; font-size: .9rem; }
  .form-control { padding: .65rem .85rem; font-size: 16px; }

  .mu-grid-cards { grid-template-columns: repeat(2, 1fr) !important; gap: .85rem; }
  .mu-equal-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .85rem; }
  .mu-row { gap: .45rem; }
  .mu-row > * { flex-basis: calc(50% - .225rem); }

  .forum-card-header { padding: 1rem; }
  .forum-card-body { padding: 1.25rem; }
  .topic-item { padding: .95rem; }
  .comment-item { padding: .95rem; }

  .message-bubble { max-width: 85%; }
  .messenger-list-item { padding: .75rem 1rem; }
  .chat-messages { padding: .75rem; }

  .error-card { padding: 2rem; }
  .error-code { font-size: 4.5rem; }

  .admin-stat { padding: 1rem; }
  .ad-card img { height: 170px; }
  .point-detail img { height: 220px; }
  .user-detail { padding: 1.5rem; }
  .wallet-balance-card { padding: 1.5rem; }
  .wallet-balance-card .balance-amount { font-size: 2rem; }

  .settings-item { padding: .7rem .95rem; }
  .twofa-setup-card, .twofa-verify-card { padding: 1.5rem; }
  .upload-area { padding: 1.5rem; }

  .mu-content { max-width: 100%; }
}

/* ============================================================
   МАЛЕНЬКИЙ ДЕСКТОП (769px — 1024px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .mu-container { max-width: 95%; }
  .content-card { padding: 1.5rem; }
  .mu-grid-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .mu-equal-grid.cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .mu-equal-grid.cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .forum-container { padding: 1.25rem; max-width: 90%; }
  .messenger-list-item { padding: .85rem 1rem; }
  .ad-card img { height: 200px; }
  .point-detail img { height: 250px; }
}

/* ============================================================
   БОЛЬШОЙ ДЕСКТОП (1025px+)
   ============================================================ */
@media (min-width: 1025px) {
  .mu-container { max-width: var(--container-max); }
  .content-card { padding: 2rem; }

  .mu-grid-cards { gap: 1.25rem; }
  .mu-equal-grid { gap: 1.25rem; }
  .mu-row { gap: .75rem; }
  .mu-row > * { flex-basis: auto; }
  .mu-row-btns > .btn, .mu-row-btns > .mu-btn { flex-basis: auto; }

  .forum-container { max-width: 1100px; }
  .chat-container { max-width: 750px; }
  .messages-page { max-width: 950px; }
  .wallet-page { max-width: 850px; }
  .ai-scanner-container { max-width: 700px; }
  .payment-page { padding: 2rem; }
}

/* ============================================================
   ОПТИМИЗАЦИЯ ПРОИЗВОДИТЕЛЬНОСТИ
   ============================================================ */
/* Подавление hover на тач-устройствах — предотвращает залипание */
@media (hover: none) {
  .dropdown-menu { display: none; }
  .dropdown:hover .dropdown-menu { display: block; }
}

/* Плавная прокрутка на мобильных */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Overscroll предотвращает pull-to-refresh на iOS */
body {
  overscroll-behavior-y: contain;
  overscroll-behavior-x: contain;
}

/* GPU-ускорение для анимированных элементов */
.glass-header, .mu-bottomnav, .mu-drawer, .theme-btn, .btn, .mu-btn,
.lift-hover, .feature-card, .topic-item, .ad-card {
  will-change: transform, box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* content-visibility для длинных списков */
.messenger-list-item, .conversation-item, .comment-item, .topic-item,
.support-ticket-item, .settings-item, .moderation-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 60px;
}

/* Оптимизация изображений */
img, video {
  image-rendering: -webkit-optimize-contrast;
}

/* Скроллбары для тач-устройств */
@media (hover: none) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--bg-tertiary); }
  ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: var(--radius-full); }
  ::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }
}

/* ============================================================
   АДАПТИВНАЯ ТИПОГРАФИКА
   ============================================================ */
:root {
  --text-base: clamp(.85rem, 0.45rem + 1vw, 1rem);
  --text-sm: clamp(.75rem, 0.4rem + .8vw, .85rem);
  --text-lg: clamp(1rem, 0.5rem + 1.2vw, 1.15rem);
  --text-xl: clamp(1.25rem, 0.6rem + 1.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 0.7rem + 2vw, 2.25rem);
  --text-3xl: clamp(2rem, 0.8rem + 2.5vw, 3rem);
}

@media (min-width: 769px) {
  body { font-size: var(--text-base); }
  p { font-size: var(--text-base); }
  small { font-size: var(--text-sm); }
  .form-control { font-size: var(--text-base); }
}

/* ============================================================
   АДАПТИВНЫЕ ОТСТУПКИ
   ============================================================ */
:root {
  --space-xs: clamp(.25rem, 0.1rem + .5vw, .5rem);
  --space-sm: clamp(.5rem, 0.2rem + 1vw, .75rem);
  --space-md: clamp(.75rem, 0.3rem + 1.5vw, 1.25rem);
  --space-lg: clamp(1rem, 0.4rem + 2vw, 2rem);
  --space-xl: clamp(1.5rem, 0.5rem + 3vw, 3rem);
}

@media (min-width: 769px) {
  .mu-container { padding-inline: var(--space-md); }
  .content-card { padding: var(--space-lg); }
  .mu-card { padding: var(--space-md); }
}

/* ============================================================
   АДАПТИВНАЯ СЕТКА
   ============================================================ */
.mu-grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-md);
}
@media (min-width: 769px) {
  .mu-grid-responsive {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
@media (min-width: 1025px) {
  .mu-grid-responsive {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* ============================================================
   МОБИЛЬНЫЙ ДРАЙВЕР ОПТИМИЗАЦИЯ
   ============================================================ */
@media (max-width: 899px) {
  .mu-drawer {
    width: min(88vw, 320px);
    padding: 1rem;
    transition: transform var(--transition);
  }
  .mu-drawer.open {
    transform: none;
    box-shadow: var(--shadow-xl);
  }
  .mu-overlay.show {
    backdrop-filter: blur(4px);
  }
  .mu-bottomnav {
    padding-bottom: max(env(safe-area-inset-bottom), 8px);
  }
  .theme-toggle.floating {
    bottom: calc(var(--bottomnav-height) + 1rem + env(safe-area-inset-bottom));
    right: .75rem;
  }
  .theme-btn {
    width: 44px; height: 44px;
    font-size: 1.1rem;
  }
}

/* ============================================================
   ПЛАВНЫЕ ПЕРЕХОДЫ ТЕМЫ
   ============================================================ */
body, .mu-header, .mu-bottomnav, .mu-drawer, .content-card,
.mu-card, .glass-card, .btn, .form-control, .dropdown-menu,
.modal-content, .forum-card, .ad-card, .user-card {
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition);
}

/* ============================================================
   АДАПТИВНЫЙ FOCUS
   ============================================================ */
@media (hover: none) {
  :focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
  }
}
@media (hover: hover) {
  :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
}

/* ============================================================
   МОБИЛЬНАЯ КЛАВИАТУРА ОПТИМИЗАЦИЯ
   ============================================================ */
input:focus, textarea:focus, select:focus {
  position: relative;
  z-index: 100;
}
@media (max-width: 768px) {
  input:focus, textarea:focus, select:focus {
    font-size: 16px !important; /* Предотвращает zoom на iOS */
  }
}

/* ============================================================
   ПЕЧАТЬ АДАПТАЦИЯ
   ============================================================ */
@media print {
  html { font-size: 12px; }
  body { background: #fff !important; color: #000 !important; }
  .mu-content, .content-card { max-width: 100% !important; padding: 0 !important; }
  .btn, .mu-btn, .theme-toggle, .mu-bottomnav, .mu-header { display: none !important; }
  a { color: #000 !important; text-decoration: underline; }
  .glass { background: #fff !important; backdrop-filter: none !important; }
  .forum-header { position: relative !important; }
  .forum-main { padding-top: 0 !important; }
}

/* ============================================================
   DARK-COMPAT: standalone-шаблоны со своим светлым <style>
   (admin_import_points, ip_detail, user_detail, forum/index_new).
   Префикс html[data-bs-theme="dark"] даёт больший приоритет,
   чем правила из шаблонов, независимо от порядка подключения.
   ============================================================ */
html[data-bs-theme="dark"] body {
  background: var(--bg-primary);
  color: var(--text-primary);
}
html[data-bs-theme="dark"] .top-bar,
html[data-bs-theme="dark"] .stat-card,
html[data-bs-theme="dark"] .table-container,
html[data-bs-theme="dark"] .toast,
html[data-bs-theme="dark"] .forum-topic,
html[data-bs-theme="dark"] .sort-nav {
  background: var(--bg-surface);
  border-color: var(--border-light);
  color: var(--text-primary);
}
html[data-bs-theme="dark"] .page-title,
html[data-bs-theme="dark"] .stat-value,
html[data-bs-theme="dark"] .info-value,
html[data-bs-theme="dark"] .topic-title { color: var(--text-primary); }
html[data-bs-theme="dark"] .stat-label,
html[data-bs-theme="dark"] .info-label,
html[data-bs-theme="dark"] .topic-meta { color: var(--text-muted); }
html[data-bs-theme="dark"] .info-row { border-color: var(--border-light); }
html[data-bs-theme="dark"] .info-value code,
html[data-bs-theme="dark"] .file-info,
html[data-bs-theme="dark"] .table-custom th,
html[data-bs-theme="dark"] .category-badge {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
html[data-bs-theme="dark"] .table-custom tr:hover,
html[data-bs-theme="dark"] .upload-area:hover,
html[data-bs-theme="dark"] .sort-link:hover:not(.active) { background: rgba(var(--primary-rgb), .08); }
html[data-bs-theme="dark"] .quick-action-btn {
  background: var(--bg-tertiary);
  border-color: var(--border-light);
  color: var(--text-secondary);
}
html[data-bs-theme="dark"] .sort-link { color: var(--text-secondary); }
html[data-bs-theme="dark"] .vote-button { color: var(--text-muted); }
html[data-bs-theme="dark"] .spinner { border-color: var(--border-light); border-top-color: var(--primary); }
html[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-tertiary); }

/* ============================================================
   ПРОФИЛЬ: layout, sidebar, карточки, табы
   ============================================================ */
.profile-wrapper { display: flex; min-height: 100dvh; background: var(--bg-primary); }
.sidebar-overlay {
  position: fixed; inset: 0; z-index: 1040; background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}
.sidebar-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }
.profile-wrapper .sidebar {
  width: 280px; flex-shrink: 0; position: sticky; top: 0; height: 100dvh;
  background: var(--bg-surface); border-right: 1px solid var(--border-light);
  display: flex; flex-direction: column; z-index: 1050;
}
.profile-wrapper .sidebar-header { padding: 1.5rem 1.25rem 1rem; border-bottom: 1px solid var(--border-light); }
.profile-wrapper .sidebar-header h3 { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; }
.profile-wrapper .sidebar-header h3 i { color: var(--primary); }
.profile-wrapper .sidebar-header p { margin: .25rem 0 0; font-size: .8rem; color: var(--text-muted); }
.sidebar-menu { padding: 1rem .75rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.sidebar-menu-item {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: .7rem .9rem; min-height: var(--tap-min);
  background: transparent; border: none; border-radius: var(--radius);
  color: var(--text-secondary); font-size: .92rem; font-weight: 600;
  cursor: pointer; text-align: left; transition: all var(--transition-fast);
  font-family: inherit;
}
.sidebar-menu-item i { width: 22px; text-align: center; color: var(--text-muted); transition: color var(--transition-fast); }
.sidebar-menu-item:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.sidebar-menu-item.active { background: var(--gradient-primary); color: #fff; box-shadow: 0 4px 14px rgba(var(--primary-rgb), .3); }
.sidebar-menu-item.active i { color: #fff; }
.sidebar-divider { height: 1px; background: var(--border-light); margin: .6rem .5rem; }
.profile-wrapper .main-content { flex: 1; min-width: 0; padding: 1.25rem; max-width: 1100px; }
.mobile-header { display: none; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.mobile-header h5 { margin: 0; font-weight: 700; }
.menu-toggle-btn {
  width: var(--tap-min); height: var(--tap-min); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius); color: var(--text-primary); font-size: 1.1rem; cursor: pointer;
}
.top-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: .9rem 1.25rem; margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}
.page-title { margin: 0; font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: .6rem; color: var(--text-primary); }
.page-title i { color: var(--primary); }
.quick-action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-width: var(--tap-min); min-height: var(--tap-min); padding: .5rem .9rem;
  background: var(--bg-tertiary); border: 1px solid var(--border-light);
  border-radius: var(--radius); color: var(--text-secondary);
  font-size: .85rem; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: all var(--transition-fast);
}
a.quick-action-btn:hover, button.quick-action-btn:hover { border-color: var(--primary); color: var(--primary-dark); }
.profile-header {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.75rem; margin-bottom: 1.25rem; position: relative; overflow: hidden;
}
.profile-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); }
.profile-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--gradient-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800; position: relative; cursor: pointer;
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), .3); overflow: hidden;
}
.profile-avatar-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff; font-size: 1.4rem;
  opacity: 0; transition: opacity var(--transition-fast);
}
.profile-avatar:hover .profile-avatar-overlay { opacity: 1; }
.badge-group { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; margin-top: 1.25rem; }
.stat-card {
  background: var(--bg-tertiary); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 1rem; text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-number { font-size: 1.5rem; font-weight: 800; color: var(--primary-dark); line-height: 1.1; }
[data-bs-theme="dark"] .stat-number { color: var(--primary); }
.stat-label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .25rem; }
.stat-icon {
  width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--gradient-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: .75rem;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), .3);
}
.stat-value { font-size: 1.6rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.tab-content { min-width: 0; }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn .3s ease; }
.profile-card {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.5rem; margin-bottom: 1.25rem; min-width: 0;
}
.card-header-custom {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding-bottom: .85rem; margin-bottom: 1rem; border-bottom: 2px solid var(--border-light);
  flex-wrap: wrap;
}
.card-title { margin: 0; font-size: 1.02rem; font-weight: 700; display: flex; align-items: center; gap: .55rem; color: var(--text-primary); }
.card-title i { color: var(--primary); }
.profile-card .quick-actions { display: grid; gap: .5rem; margin-top: 1rem; }
.profile-card .quick-actions .quick-action-btn { justify-content: flex-start; }
.achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.page-btn {
  min-width: var(--tap-min); min-height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  padding: .4rem .7rem; margin: .15rem;
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); color: var(--text-secondary);
  font-size: .85rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast);
}
.page-btn:hover:not(.disabled) { border-color: var(--primary); color: var(--primary-dark); }
.page-btn.active { background: var(--gradient-primary); color: #fff; border-color: transparent; }
.page-btn.disabled { opacity: .5; cursor: default; }
.skeleton-loader {
  height: 64px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, rgba(var(--primary-rgb), .08) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%; animation: skeletonLoad 1.5s ease infinite;
  margin-bottom: .6rem;
}
@media (max-width: 768px) {
  .profile-wrapper .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    transform: translateX(-105%); visibility: hidden; pointer-events: none;
    transition: transform var(--transition), visibility var(--transition);
    box-shadow: var(--shadow-xl);
  }
  .profile-wrapper .sidebar.show { transform: none; visibility: visible; pointer-events: auto; }
  .mobile-header { display: flex; }
  .top-bar { display: none; }
  .profile-wrapper .main-content { padding: .85rem .85rem 4rem; max-width: 100%; }
  .profile-header { padding: 1.25rem; }
  .profile-avatar { width: 76px; height: 76px; font-size: 1.6rem; }
  .profile-card { padding: 1.1rem; }
}

/* ============================================================
   МЕССЕНДЖЕР
   ============================================================ */
.messenger-header {
  position: sticky; top: 0; z-index: 1000; height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .4rem 1rem;
  background: rgba(var(--bg-secondary-rgb, 255, 255, 255), .8);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border-light);
}
.back-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; min-height: var(--tap-min);
  background: var(--bg-tertiary); border: 1px solid var(--border-light);
  border-radius: var(--radius-full); color: var(--text-secondary);
  font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: all var(--transition-fast); white-space: nowrap;
}
.back-btn:hover { background: var(--gradient-primary); color: #fff; border-color: transparent; }
.messenger-header .header-actions { display: flex; align-items: center; gap: .6rem; }
.messenger-header .theme-toggle {
  width: var(--tap-min); height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary); border: 1px solid var(--border-light);
  border-radius: 50%; color: var(--text-secondary); font-size: 1rem; cursor: pointer;
  transition: all var(--transition-fast);
}
.messenger-header .theme-toggle:hover { background: var(--gradient-primary); color: #fff; border-color: transparent; transform: rotate(15deg); }
.user-badge { display: flex; align-items: center; gap: .55rem; }
.user-badge .user-avatar { width: 36px; height: 36px; font-size: .9rem; }
.user-name { font-weight: 650; font-size: .9rem; color: var(--text-primary); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-container {
  display: flex; height: calc(100dvh - var(--header-height)); min-height: 0;
  background: var(--bg-primary);
}
.messenger-container .sidebar {
  width: 320px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--bg-surface); border-right: 1px solid var(--border-light);
  min-height: 0;
}
.messenger-container .sidebar-header { padding: 1rem 1rem .5rem; }
.messenger-container .sidebar-header h5 { margin: 0 0 .75rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.messenger-container .sidebar-header h5 i { color: var(--primary); }
.search-box { position: relative; }
.search-box > i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .85rem; pointer-events: none; }
.search-box input {
  width: 100%; min-height: var(--tap-min);
  background: var(--bg-tertiary); border: 1px solid var(--border-light);
  border-radius: var(--radius-full); color: var(--text-primary);
  padding: .55rem .9rem .55rem 2.3rem; font-size: 16px; outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); }
.search-box input::placeholder { color: var(--text-muted); }
.sidebar-actions { padding: .5rem 1rem; }
.new-chat-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  min-height: var(--tap-min); padding: .6rem 1rem;
  background: var(--gradient-primary); color: #fff; border: none;
  border-radius: var(--radius); font-weight: 650; font-size: .9rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), .3); transition: all var(--transition-fast);
  font-family: inherit;
}
.new-chat-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.conversations-list { flex: 1; overflow-y: auto; padding: .5rem; display: flex; flex-direction: column; gap: .25rem; }
.conversation-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .7rem; border-radius: var(--radius);
  cursor: pointer; transition: background var(--transition-fast);
  border: 1px solid transparent; min-width: 0;
}
.conversation-item:hover { background: var(--bg-tertiary); }
.conversation-item.active { background: rgba(var(--primary-rgb), .1); border-color: rgba(var(--primary-rgb), .3); }
.conv-avatar {
  width: 46px; height: 46px; flex-shrink: 0; position: relative;
  background: var(--gradient-primary); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.05rem;
}
.online-dot {
  position: absolute; right: 0; bottom: 0; width: 12px; height: 12px;
  background: var(--ui-success); border: 2px solid var(--bg-surface); border-radius: 50%;
}
.conv-info { flex: 1; min-width: 0; }
.conv-header { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.conv-name { font-weight: 650; font-size: .9rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-time { font-size: .7rem; color: var(--text-muted); flex-shrink: 0; }
.conv-preview { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .15rem; }
.last-message { font-size: .8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread-badge {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 .35rem;
  background: var(--primary); color: #fff; border-radius: var(--radius-full);
  font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-area { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-primary); }
.chat-area .empty-state { margin: auto; border: none; background: transparent; }
.chat-header {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem 1rem; background: var(--bg-surface); border-bottom: 1px solid var(--border-light);
  min-height: 64px;
}
.chat-header-left { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.chat-avatar {
  width: 42px; height: 42px; flex-shrink: 0;
  background: var(--gradient-primary); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1rem;
}
.chat-info { min-width: 0; }
.chat-info h6 { margin: 0; font-size: .95rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-info small { font-size: .75rem; color: var(--text-muted); }
.chat-header-actions { display: flex; align-items: center; gap: .35rem; }
.icon-btn {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  color: var(--text-secondary); font-size: 1rem; cursor: pointer;
  transition: all var(--transition-fast);
}
.icon-btn:hover { background: var(--bg-tertiary); color: var(--primary); }
.messages-container { flex: 1; overflow-y: auto; padding: 1rem; min-height: 0; }
.messages-list { display: flex; flex-direction: column; gap: .35rem; max-width: 800px; margin: 0 auto; }
.date-divider { display: flex; align-items: center; gap: .75rem; margin: .75rem 0 .5rem; }
.date-divider::before, .date-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }
.date-divider span {
  font-size: .72rem; font-weight: 650; color: var(--text-muted);
  background: var(--bg-surface); border: 1px solid var(--border-light);
  padding: .2rem .75rem; border-radius: var(--radius-full);
}
.message-wrapper { display: flex; }
.message-wrapper.mine { justify-content: flex-end; }
.message-wrapper.other { justify-content: flex-start; }
#messagesList .message-bubble { max-width: 78%; }
.message-input-area {
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .65rem .85rem calc(.65rem + env(safe-area-inset-bottom));
  background: var(--bg-surface); border-top: 1px solid var(--border-light);
}
.input-wrapper { flex: 1; min-width: 0; }
.input-wrapper textarea {
  width: 100%; min-height: var(--tap-min); max-height: 140px; resize: none;
  background: var(--bg-tertiary); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); color: var(--text-primary);
  padding: .65rem .95rem; font-size: 16px; font-family: inherit; line-height: 1.45;
  outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input-wrapper textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); }
.send-btn {
  width: var(--tap-min); height: var(--tap-min); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient-primary); color: #fff; border: none;
  border-radius: 50%; font-size: 1rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), .3); transition: all var(--transition-fast);
}
.send-btn:hover:not(:disabled) { transform: scale(1.06); }
.send-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.user-search-result {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .6rem .7rem; background: transparent; border: none;
  border-radius: var(--radius); cursor: pointer; text-align: left;
  transition: background var(--transition-fast); font-family: inherit;
}
.user-search-result:hover { background: var(--bg-tertiary); }
.user-avatar-sm {
  width: 38px; height: 38px; flex-shrink: 0;
  background: var(--gradient-primary); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .9rem;
}
@media (max-width: 768px) {
  .messenger-container .sidebar {
    position: fixed; top: var(--header-height); left: 0; bottom: 0; z-index: 1040;
    width: min(86vw, 340px);
    transform: translateX(-105%); visibility: hidden; pointer-events: none;
    transition: transform var(--transition), visibility var(--transition);
    box-shadow: var(--shadow-xl);
  }
  .messenger-container .sidebar.show { transform: none; visibility: visible; pointer-events: auto; }
  .user-name { display: none; }
  .messenger-header .header-title span { display: none; }
  #messagesList .message-bubble { max-width: 88%; }
  .messages-container { padding: .65rem; }
}

.about-header {
  position: sticky; top: 0; z-index: 1000; height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .4rem 1rem;
  background: rgba(var(--bg-secondary-rgb, 255, 255, 255), .8);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border-light);
}
.about-main { padding: 1.25rem 0 3rem; }
.about-main .content-wrapper { max-width: 960px; margin: 0 auto; padding: 0 1rem; display: grid; gap: 1.25rem; }
.about-main .hero-section { text-align: center; padding: 2.5rem 1.5rem; }
.about-main .hero-icon {
  width: 72px; height: 72px; margin: 0 auto 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  border-radius: 22px; font-size: 1.9rem; color: #fff;
}
.about-main .hero-section h1 { margin-bottom: .5rem; }
.about-main .hero-tagline { font-size: 1.05rem; max-width: 560px; margin: 0 auto; }
.cards-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
.info-card {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.6rem; position: relative; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.info-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); }
.info-card .card-icon {
  width: 52px; height: 52px; border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: #fff; background: var(--gradient-primary);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), .3); margin-bottom: 1rem;
}
.info-card h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.info-card p { font-size: .92rem; }
.info-card ul { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .45rem; }
.info-card ul li { display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; color: var(--text-secondary); }
.info-card ul li i { color: var(--primary); margin-top: .2rem; }
.full-section {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.6rem;
}
.full-section h3 { font-size: 1.05rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.full-section h3 i { color: var(--primary); }
.task-grid { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .task-grid { grid-template-columns: repeat(2, 1fr); } }
.task-item {
  display: flex; align-items: flex-start; gap: .65rem;
  background: var(--bg-tertiary); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: .8rem .95rem;
  font-size: .88rem; color: var(--text-secondary); line-height: 1.5;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.task-item:hover { border-color: rgba(var(--primary-rgb), .35); transform: translateY(-1px); }
.task-item i { color: var(--primary); margin-top: .2rem; flex-shrink: 0; }
.result-card {
  background: var(--gradient-primary); color: #fff;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: 2rem 1.6rem; text-align: center; position: relative; overflow: hidden;
}
.result-card::after {
  content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%;
  right: -90px; top: -90px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 70%);
}
.result-card > i { font-size: 2rem; margin-bottom: .75rem; display: inline-block; }
.result-card h3, .result-card h1, .result-card h2, .result-card p { color: #fff; }
.result-card p { max-width: 60ch; margin: 0 auto; color: rgba(255,255,255,.92); }
.about-footer { border-top: 1px solid var(--border-light); background: var(--bg-surface); }
.about-footer .footer-content { max-width: 960px; margin: 0 auto; padding: 1.25rem 1rem; text-align: center; }
.about-footer p { margin: 0; font-size: .85rem; color: var(--text-secondary); }
@media (max-width: 640px) {
  .about-main { padding: .85rem 0 2.5rem; }
  .about-main .hero-section { padding: 2rem 1.1rem; }
  .info-card, .full-section { padding: 1.2rem; }
  .result-card { padding: 1.6rem 1.2rem; }
}

/* ============================================================
   АДМИНКА (.admin-wrapper): sidebar, live-статы, таблицы, тумблеры
   (общие .top-bar/.tab-pane/.stat-card/.quick-action-btn уже глобальные)
   ============================================================ */
.admin-wrapper { display: flex; min-height: 100dvh; background: var(--bg-primary); }
.admin-wrapper .sidebar {
  width: 280px; flex-shrink: 0; position: sticky; top: 0; height: 100dvh;
  background: var(--bg-surface); border-right: 1px solid var(--border-light);
  display: flex; flex-direction: column; z-index: 1050;
}
.admin-wrapper .sidebar-header { padding: 1.5rem 1.25rem 1rem; border-bottom: 1px solid var(--border-light); }
.admin-wrapper .sidebar-header h3 { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; }
.admin-wrapper .sidebar-header h3 i { color: var(--primary); }
.admin-wrapper .sidebar-header p { margin: .25rem 0 0; font-size: .8rem; color: var(--text-muted); }
.admin-wrapper .sidebar-menu { padding: 1rem .75rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.admin-wrapper .sidebar-menu-item {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: .7rem .9rem; min-height: var(--tap-min);
  background: transparent; border: none; border-radius: var(--radius);
  color: var(--text-secondary); font-size: .9rem; font-weight: 600;
  cursor: pointer; text-align: left; transition: all var(--transition-fast);
  font-family: inherit;
}
.admin-wrapper .sidebar-menu-item i { width: 22px; text-align: center; color: var(--text-muted); transition: color var(--transition-fast); }
.admin-wrapper .sidebar-menu-item:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.admin-wrapper .sidebar-menu-item.active { background: var(--gradient-primary); color: #fff; box-shadow: 0 4px 14px rgba(var(--primary-rgb), .3); }
.admin-wrapper .sidebar-menu-item.active i { color: #fff; }
.admin-wrapper .sidebar-menu-item .badge { margin-left: auto; background: rgba(var(--primary-rgb), .15); color: var(--primary-dark); }
.admin-wrapper .sidebar-menu-item.active .badge { background: rgba(255,255,255,.25); color: #fff; }
[data-bs-theme="dark"] .admin-wrapper .sidebar-menu-item .badge { color: var(--primary); }
.admin-wrapper .sidebar-divider { height: 1px; background: var(--border-light); margin: .6rem .5rem; }
.admin-wrapper .main-content { flex: 1; min-width: 0; padding: 1.25rem; max-width: 1200px; }
.admin-wrapper .user-info { display: flex; align-items: center; gap: .75rem; }
/* Live-статы */
.live-stats { margin-bottom: 1.25rem; }
.live-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.live-stat-item {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: .9rem; text-align: center; box-shadow: var(--shadow);
}
.live-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--primary-dark); line-height: 1.1; }
[data-bs-theme="dark"] .live-stat-value { color: var(--primary); }
.live-stat-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .25rem; }
/* Контейнеры таблиц */
.admin-wrapper .table-container {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.25rem; margin-bottom: 1.25rem; overflow: hidden;
}
.table-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.table-title { margin: 0; font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: .55rem; color: var(--text-primary); }
.table-title i { color: var(--primary); }
/* Градиентные кнопки */
.btn-gradient, .btn-gradient-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap-min); padding: .6rem 1.1rem;
  border: none; border-radius: var(--radius);
  color: #fff !important; font-weight: 650; font-size: .88rem;
  cursor: pointer; text-decoration: none !important; transition: all var(--transition-fast);
  font-family: inherit;
}
.btn-gradient { background: var(--gradient-primary); box-shadow: 0 4px 14px rgba(var(--primary-rgb), .3); }
.btn-gradient:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.btn-gradient-danger { background: var(--gradient-danger); box-shadow: 0 4px 14px rgba(239, 68, 68, .3); }
/* Тумблеры */
.switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--border); border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}
.slider::before {
  content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(22px); }
/* Карточки сессий / точек / тикетов */
.session-card, .card-point {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 1rem; margin-bottom: .6rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.session-card:hover, .card-point:hover { border-color: rgba(var(--primary-rgb), .3); box-shadow: var(--shadow-sm); }
.ticket-info { font-size: .82rem; color: var(--text-muted); }
.ticket-message {
  background: var(--bg-tertiary); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: .75rem .9rem; margin-top: .5rem;
  font-size: .88rem; color: var(--text-secondary); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
@media (max-width: 768px) {
  .admin-wrapper .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    transform: translateX(-105%); visibility: hidden; pointer-events: none;
    transition: transform var(--transition), visibility var(--transition);
    box-shadow: var(--shadow-xl);
  }
  .admin-wrapper .sidebar.show { transform: none; visibility: visible; pointer-events: auto; }
  .admin-wrapper .main-content { padding: .85rem .85rem 4rem; max-width: 100%; }
  .admin-wrapper .table-container { padding: .9rem; }
  .live-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ПОДДЕРЖКА
   ============================================================ */
.support-header {
  position: sticky; top: 0; z-index: 1000; height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .4rem 1rem;
  background: rgba(var(--bg-secondary-rgb, 255, 255, 255), .8);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border-light);
}
.support-main { padding: 1.25rem 0 3rem; }
.support-container { max-width: 960px; margin: 0 auto; padding: 0 1rem; }
.new-ticket-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; min-height: var(--tap-min);
  background: var(--gradient-primary); color: #fff !important; border: none;
  border-radius: var(--radius-full); font-weight: 650; font-size: .85rem;
  text-decoration: none; cursor: pointer; transition: all var(--transition-fast);
  box-shadow: 0 2px 10px rgba(var(--primary-rgb), .25); white-space: nowrap;
}
.new-ticket-btn:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); color: #fff !important; }
.toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 9999;
  display: flex; flex-direction: column; gap: .5rem; max-width: min(92vw, 380px);
}
.custom-toast {
  display: flex; align-items: center; gap: .65rem;
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-left: 4px solid var(--info);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .85rem 1rem; font-size: .88rem; color: var(--text-primary);
  animation: toastIn .3s ease forwards;
}
.custom-toast.success { border-left-color: var(--success); }
.custom-toast.success i:first-child { color: var(--success); }
.custom-toast.danger { border-left-color: var(--danger); }
.custom-toast.danger i:first-child { color: var(--danger); }
.custom-toast.warning { border-left-color: var(--warning); }
.custom-toast.warning i:first-child { color: var(--warning); }
.custom-toast.info i:first-child { color: var(--info); }
.support-card {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  overflow: hidden; margin-bottom: 1.25rem; position: relative;
}
.support-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-primary); }
.support-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border-light); background: var(--bg-tertiary);
}
.support-card-title { margin: 0; font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: .55rem; color: var(--text-primary); }
.support-card-title i { color: var(--primary); }
.support-card-body { padding: 1.25rem; }
.support-card .stats-grid { margin-top: 0; }
.filters-bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--bg-tertiary); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: .5rem; margin-bottom: 1rem;
}
.filter-select {
  min-height: var(--tap-min); background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border-light); border-radius: var(--radius);
  padding: .5rem .8rem; font-size: .88rem; font-family: inherit; cursor: pointer;
}
.ticket-item {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: .65rem;
  cursor: pointer; transition: all var(--transition-fast);
}
.ticket-item:hover { border-color: rgba(var(--primary-rgb), .35); border-left-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.ticket-item.priority-high, .ticket-item.priority-urgent { border-left-color: var(--danger); }
.ticket-item.status-resolved, .ticket-item.status-closed { border-left-color: var(--success); opacity: .92; }
.ticket-header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.ticket-number { font-family: monospace; font-size: .8rem; font-weight: 700; color: var(--text-muted); }
.ticket-title { font-weight: 650; font-size: .98rem; color: var(--text-primary); margin-bottom: .25rem; }
.ticket-preview { font-size: .85rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: .5rem; }
.ticket-meta { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .76rem; color: var(--text-muted); }
.ticket-meta i { margin-right: .25rem; }
.badge-custom {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: var(--radius-full);
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.btn-support {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: var(--tap-min); padding: .6rem 1.2rem;
  border-radius: var(--radius); font-weight: 650; font-size: .9rem;
  border: 1px solid transparent; cursor: pointer; text-decoration: none !important;
  transition: all var(--transition-fast); font-family: inherit;
}
.btn-primary-custom.btn-support, button.btn-primary-custom.btn-support {
  background: var(--gradient-primary); color: #fff !important; border: none;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), .3);
}
.btn-primary-custom.btn-support:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); }
.reply-item { border: 1px solid var(--border-light); }
.reply-item.reply-support { background: rgba(var(--primary-rgb), .07); }
.reply-item.reply-user { background: var(--bg-tertiary); }
.original-message { border: 1px solid var(--border-light); }
.support-textarea, .support-input, .support-select {
  width: 100%; min-height: var(--tap-min);
  background: var(--bg-surface); color: var(--text-primary);
  border: 1.5px solid var(--border-light); border-radius: var(--radius);
  padding: .65rem .9rem; font-size: 16px; font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.support-textarea { min-height: 120px; resize: vertical; }
.support-textarea:focus, .support-input:focus, .support-select:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12);
}
.support-label { font-weight: 600; font-size: .85rem; color: var(--text-secondary); margin-bottom: .4rem; display: block; }
.support-form-group { margin-bottom: 1rem; }
.remove-attachment {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(239, 68, 68, .1); color: var(--danger);
  border: 1px solid rgba(239, 68, 68, .3); border-radius: var(--radius-sm);
  padding: .3rem .6rem; font-size: .78rem; font-weight: 600; cursor: pointer;
}
@media (max-width: 768px) {
  .support-card-body { padding: 1rem; }
  .support-card-header { padding: .9rem 1rem; }
  .ticket-preview { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}