@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import './variables.css';

/* Strict Modern Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark;
  font-size: 14px;
  scrollbar-gutter: stable;
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--mg-bg-app) !important;
  background-image: none !important;
  color: var(--mg-text-main);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  outline: none;
}

input {
  font-family: inherit;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* App Layout Grid (Left Sidebar, Feed Center, Right Sidebar) */
.mg-app-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 1240px;
  min-height: 100vh;
  padding: 16px 14px;
  gap: 24px;
}

/* --------------------------------------------------------------------------
   Left Sidebar Navigation (Monochrome Liquid Glass Aesthetic)
   -------------------------------------------------------------------------- */
.mg-left-nav {
  width: 230px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100vh - 32px);
  position: sticky;
  top: 16px;
}

.mg-nav-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mg-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 20px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--mg-text-main);
  letter-spacing: -0.03em;
}

.mg-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--mg-radius-sm);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--mg-text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  box-shadow: var(--mg-inner-bevel);
  transition: all var(--mg-trans-fast);
}

.mg-sidebar-logo:hover .mg-logo-icon {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: #e2e5ec;
}

.mg-nav-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  list-style: none;
}

.mg-nav-item a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: var(--mg-radius-md);
  color: var(--mg-text-secondary);
  font-size: 0.94rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all var(--mg-trans-fast);
}

.mg-nav-item a:hover {
  background-color: var(--mg-bg-surface-hover);
  color: var(--mg-text-main);
  border-color: var(--mg-border-subtle);
}

.mg-nav-item.active a {
  background-color: var(--mg-bg-active-pill);
  color: var(--mg-text-main);
  font-weight: 600;
  border-color: var(--mg-border-hover);
  box-shadow: none;
}

.mg-nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  stroke-width: 1.8px;
}

.mg-nav-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--mg-border-subtle);
}

.mg-nav-premium {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--mg-radius-md);
  background: var(--mg-glass-pill-bg);
  border: 1px solid var(--mg-glass-pill-border);
  color: var(--mg-text-main);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--mg-inner-bevel);
  transition: all var(--mg-trans-fast);
}

.mg-nav-premium:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #e2e5ec;
}

.mg-nav-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--mg-radius-md);
  color: var(--mg-text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--mg-trans-fast);
}

.mg-nav-logout:hover {
  color: var(--mg-text-main);
}

/* --------------------------------------------------------------------------
   Center Feed Column
   -------------------------------------------------------------------------- */
.mg-center-feed {
  flex: 1;
  max-width: 610px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: max-width var(--mg-trans-normal);
}

/* --------------------------------------------------------------------------
   Right Sidebar (Monochrome Liquid Glass Widgets)
   -------------------------------------------------------------------------- */
.mg-right-aside {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--mg-bg-card);
  backdrop-filter: var(--mg-glass-blur);
  -webkit-backdrop-filter: var(--mg-glass-blur);
  border: 1px solid var(--mg-border-card);
  border-radius: var(--mg-radius-card);
  box-shadow: var(--mg-shadow-glass);
  padding: 16px;
  align-self: flex-start !important;
  height: auto !important;
  max-height: fit-content !important;
  position: sticky;
  top: 16px;
}

.mg-right-sidebar::-webkit-scrollbar {
  display: none;
}

.mg-sidebar-card {
  background: var(--mg-bg-card);
  backdrop-filter: var(--mg-glass-blur);
  -webkit-backdrop-filter: var(--mg-glass-blur);
  border: 1px solid var(--mg-border-card);
  border-radius: var(--mg-radius-card);
  box-shadow: var(--mg-shadow-glass);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mg-aside-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mg-text-main);
  letter-spacing: -0.01em;
}

.mg-aside-empty {
  color: var(--mg-text-secondary);
  font-size: 0.86rem;
  line-height: 1.5;
}

.mg-aside-zero-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--mg-radius-sm);
  font-size: 0.84rem;
  color: var(--mg-text-secondary);
  transition: all var(--mg-trans-fast);
}

.mg-aside-zero-stat:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}

.mg-aside-zero-val {
  font-weight: 700;
  color: var(--mg-text-main);
  background: var(--mg-bg-surface-hover);
  border: 1px solid var(--mg-border-subtle);
  padding: 2px 9px;
  border-radius: var(--mg-radius-pill);
  font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   "Для вас" (For You) Recommendation Card & Sub-sections
   -------------------------------------------------------------------------- */
.mg-for-you-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
}

.mg-for-you-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2px;
}

.mg-for-you-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--mg-radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  color: #a1a1aa;
  letter-spacing: 0.02em;
  user-select: none;
  cursor: pointer;
  transition: all var(--mg-trans-fast, 0.2s ease);
}

.mg-for-you-live-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--mg-text-main);
}

.mg-for-you-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: none !important;
  animation: mgLivePulse 2s infinite ease-in-out;
}

@keyframes mgLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

.mg-for-you-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0 -4px;
}

.mg-for-you-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mg-for-you-section-header {
  display: flex;
  align-items: center;
  gap: 7px;
}

.mg-for-you-section-icon {
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mg-for-you-section-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--mg-text-main);
  letter-spacing: -0.01em;
}

/* 1. Популярное Card */
.mg-trending-post-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 13px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--mg-radius-sm, 12px);
  text-decoration: none;
  transition: all var(--mg-trans-fast, 0.2s cubic-bezier(0.16, 1, 0.3, 1));
  cursor: pointer;
}

.mg-trending-post-card:hover {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.mg-trending-post-tag {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--mg-text-main);
  letter-spacing: -0.01em;
}

.mg-trending-post-desc {
  font-size: 0.81rem;
  line-height: 1.42;
  color: #a1a1aa;
  margin: 0;
}

.mg-trending-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.mg-trending-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  color: #71717a;
  font-weight: 500;
}

.mg-trending-stat svg {
  opacity: 0.8;
}

.mg-trending-badge {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--mg-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: #e4e4e7;
  border: 1px solid rgba(255, 255, 255, 0.12);
  letter-spacing: 0.01em;
}

/* 2. Возможно, вы знакомы Card */
.mg-suggested-user-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 13px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--mg-radius-sm, 12px);
  transition: all var(--mg-trans-fast, 0.2s ease);
}

.mg-suggested-user-card:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.13);
}

/* 2b. Возможно, вы знакомы - Пустое состояние ("На сегодня ничего нет") */
.mg-suggested-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(255, 255, 255, 0.09);
  border-radius: var(--mg-radius-sm, 12px);
  transition: all var(--mg-trans-fast, 0.2s ease);
}

.mg-suggested-empty-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}

.mg-suggested-empty-icon {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
  margin-bottom: 2px;
}

.mg-suggested-empty-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mg-text-main, #ffffff);
  letter-spacing: -0.01em;
}

.mg-suggested-empty-desc {
  font-size: 0.77rem;
  color: #71717a;
  line-height: 1.4;
  margin: 0;
}

.mg-suggested-user-top {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: opacity 0.15s ease;
}

.mg-suggested-user-top:hover {
  opacity: 0.9;
}

.mg-suggested-avatar-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.mg-suggested-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: block;
}

.mg-suggested-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mg-text-main);
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  user-select: none;
}

.mg-suggested-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #111111;
}

.mg-suggested-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.mg-suggested-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mg-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.mg-suggested-handle {
  font-size: 0.77rem;
  color: #71717a;
  font-weight: 400;
}

.mg-suggested-follow-btn {
  padding: 5px 13px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--mg-radius-pill);
  background: #ffffff;
  color: #000000;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--mg-trans-fast, 0.2s cubic-bezier(0.16, 1, 0.3, 1));
  flex-shrink: 0;
  line-height: 1.2;
}

.mg-suggested-follow-btn:hover {
  background: #e4e4e7;
  transform: translateY(-0.5px);
}

.mg-suggested-follow-btn.is-following {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #d4d4d8;
}

.mg-suggested-follow-btn.is-following:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.mg-suggested-interests-caption {
  font-size: 0.72rem;
  color: #71717a;
  letter-spacing: 0.02em;
}

.mg-suggested-interests {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mg-suggested-tag {
  font-size: 0.74rem;
  color: #d4d4d8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2px 7px;
  transition: all var(--mg-trans-fast, 0.2s ease);
}

.mg-suggested-tag:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.14);
}

/* 3. Тема дня Chips */
.mg-topic-chips-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mg-topic-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: var(--mg-radius-sm, 12px);
  text-decoration: none;
  color: #f4f4f5;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--mg-trans-fast, 0.2s cubic-bezier(0.16, 1, 0.3, 1));
  cursor: pointer;
}

.mg-topic-chip:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateX(2px);
}

.mg-topic-chip-prefix {
  color: #71717a;
  font-weight: 700;
  margin-right: 2px;
  transition: color var(--mg-trans-fast, 0.2s ease);
}

.mg-topic-chip:hover .mg-topic-chip-prefix {
  color: var(--mg-text-main);
}

.mg-topic-chip-text {
  font-weight: 600;
  flex: 1;
}

.mg-topic-chip-count {
  font-size: 0.74rem;
  color: #71717a;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 7px;
  border-radius: var(--mg-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Color Scheme enhancements */
[data-color-scheme]:not([data-color-scheme="monochrome"]) .mg-for-you-live-dot {
  background: var(--mg-accent-primary);
  box-shadow: none !important;
}

[data-color-scheme]:not([data-color-scheme="monochrome"]) .mg-trending-post-card:hover {
  border-color: rgba(var(--mg-accent-rgb), 0.35);
}

[data-color-scheme]:not([data-color-scheme="monochrome"]) .mg-trending-badge {
  background: rgba(var(--mg-accent-rgb), 0.12);
  color: var(--mg-accent-primary);
  border-color: rgba(var(--mg-accent-rgb), 0.25);
}

[data-color-scheme]:not([data-color-scheme="monochrome"]) .mg-topic-chip:hover {
  background: rgba(var(--mg-accent-rgb), 0.08);
  border-color: rgba(var(--mg-accent-rgb), 0.3);
}

[data-color-scheme]:not([data-color-scheme="monochrome"]) .mg-topic-chip:hover .mg-topic-chip-prefix {
  color: var(--mg-accent-primary);
}

/* --------------------------------------------------------------------------
   Monochrome Liquid Glass Empty State Card ("Silent Signal")
   -------------------------------------------------------------------------- */
.mg-empty-card {
  background: var(--mg-bg-card);
  backdrop-filter: var(--mg-glass-blur);
  -webkit-backdrop-filter: var(--mg-glass-blur);
  border: 1px solid var(--mg-border-card);
  border-radius: var(--mg-radius-card);
  box-shadow: var(--mg-shadow-glass), var(--mg-inner-bevel);
  padding: 48px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.mg-empty-card::before {
  content: '';
  position: absolute;
  top: -70px;
  width: 240px;
  height: 140px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.mg-beacon-visual {
  width: 64px;
  height: 64px;
  border-radius: var(--mg-radius-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mg-text-secondary);
  margin-bottom: 8px;
  box-shadow: var(--mg-inner-bevel);
}

.mg-empty-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mg-text-main);
  letter-spacing: -0.02em;
}

.mg-empty-desc {
  font-size: 0.92rem;
  color: var(--mg-text-secondary);
  max-width: 420px;
  line-height: 1.6;
}

.mg-empty-action-btn {
  margin-top: 10px;
  background: var(--mg-btn-glass-bg);
  border: 1px solid var(--mg-btn-glass-border);
  color: var(--mg-btn-glass-text);
  font-weight: 500;
  font-size: 0.88rem;
  padding: 7px 20px;
  border-radius: var(--mg-radius-pill);
  cursor: pointer;
  box-shadow: none;
  transition: all var(--mg-trans-fast);
}

.mg-empty-action-btn:hover {
  background: var(--mg-btn-glass-hover-bg);
  border-color: var(--mg-btn-glass-hover-border);
  color: var(--mg-btn-glass-hover-text);
  transform: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Mobile App Top Bar & Bottom Nav Components
   -------------------------------------------------------------------------- */
:root {
  --mg-sat: env(safe-area-inset-top, 0px);
  --mg-sab: env(safe-area-inset-bottom, 0px);
}

.mg-mobile-top-bar {
  display: none;
}

.mg-mobile-bottom-nav {
  display: none;
}

/* --------------------------------------------------------------------------
   Responsive Adaptations
   -------------------------------------------------------------------------- */
@media (max-width: 1140px) {
  .mg-right-aside {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 980px) {
  .mg-left-nav {
    width: 68px;
    align-items: center;
  }
  .mg-sidebar-logo-text,
  .mg-nav-item > a > span:not(.mg-nav-icon),
  .mg-nav-premium span,
  .mg-nav-logout span,
  .mg-sidebar-user-meta {
    display: none !important;
  }
  .mg-sidebar-logo {
    padding: 10px 0 20px;
    justify-content: center;
  }
  .mg-nav-item a {
    justify-content: center;
    padding: 12px;
  }
  .mg-app-layout {
    padding: 12px 10px;
    gap: 16px;
  }
}

/* --------------------------------------------------------------------------
   Full Mobile Port (Smartphones & Touch Devices <= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Hide desktop sidebars */
  .mg-left-nav,
  .mg-right-aside {
    display: none !important;
  }

  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Full screen app container with safe-area spacing */
  .mg-app-layout {
    display: block;
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    padding: 0 !important;
    margin: 0 !important;
    padding-top: calc(44px + var(--mg-sat)) !important;
    padding-bottom: calc(82px + var(--mg-sab)) !important;
    overflow-x: hidden;
  }

  .mg-center-feed {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 10px 20px !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  /* Mobile Top App Bar (Slim & Compact) */
  .mg-mobile-top-bar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(44px + var(--mg-sat));
    padding-top: var(--mg-sat);
    padding-left: 14px;
    padding-right: 14px;
    background: rgba(9, 10, 15, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1050;
    pointer-events: auto;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  }

  .mg-mobile-top-pill *,
  .mg-mobile-top-icon-btn * {
    pointer-events: none;
  }

  .mg-mobile-top-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    user-select: none;
  }

  .mg-mobile-logo-text {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--mg-text-main);
    letter-spacing: -0.03em;
  }

  .mg-mobile-top-brand .mg-sidebar-status-dot {
    width: 6px;
    height: 6px;
  }

  .mg-mobile-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mg-mobile-top-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--mg-radius-pill);
    padding: 3px 9px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #fbbf24;
    cursor: pointer;
    transition: all var(--mg-trans-fast);
    height: 28px;
  }

  .mg-mobile-top-pill:active {
    transform: scale(0.94);
  }

  .mg-mobile-top-icon-btn {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--mg-trans-fast);
    padding: 0;
  }

  .mg-mobile-top-icon-btn svg {
    width: 16px;
    height: 16px;
  }

  .mg-mobile-top-icon-btn:active {
    transform: scale(0.92);
  }

  .mg-mobile-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    border-radius: var(--mg-radius-pill);
    background: #ef4444;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #09090b;
  }

  /* Mobile Bottom Navigation Bar (Floating Pill Capsule Bar) */
  .mg-mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: calc(14px + var(--mg-sab));
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 28px));
    height: 56px;
    padding: 0 6px;
    background: #09090b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    z-index: 1050;
    pointer-events: auto;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
  }

  .mg-mobile-tab {
    flex: 1;
    max-width: 58px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 16px;
    outline: none;
    font-family: inherit;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    position: relative;
  }

  .mg-mobile-tab:hover {
    color: rgba(255, 255, 255, 0.75);
  }

  .mg-mobile-tab:active {
    transform: scale(0.92);
  }

  /* Active Tab: Rounded Squircle Highlight matching screenshot */
  .mg-mobile-tab.active {
    background: #19191d;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  .mg-mob-tab-icon {
    position: relative;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .mg-mob-tab-icon svg {
    stroke-width: 2;
    transition: stroke-width 0.15s, filter 0.15s;
  }

  .mg-mobile-tab.active .mg-mob-tab-icon svg {
    stroke-width: 2.3;
  }

  .mg-mobile-msg-badge,
  .mg-mobile-notif-badge {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: none !important;
  }

  .mg-mob-avatar-wrap {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .mg-mobile-tab.active .mg-mob-avatar-wrap {
    border-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  .mg-mob-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mg-mob-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #1a1a1c;
  }
}