:root {
  /* Variáveis do Grid System */
  --grid-columns: 8;
  --grid-gutter: 0.25rem;

  /* Cores (Light Mode Restrito) */
  --bg-color: #FFFFFF;
  --surface-color: #FFFFFF;
  --text-primary: #000000;
  --text-secondary: #808080;
  --accent-color: #000000;
  --border-color: #808080;
}

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

body {
  font-family: 'Darker Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-primary);
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   Grid System de 8 Colunas
   ========================================================================== */
.grid-system {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 30rem;
  /* Largura máxima otimizada para Mobile First */
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
  background-color: var(--bg-color);
}

/* Classes utilitárias para o Grid */
.col-span-1 {
  grid-column: span 1;
}

.col-span-2 {
  grid-column: span 2;
}

.col-span-3 {
  grid-column: span 3;
}

.col-span-4 {
  grid-column: span 4;
}

.col-span-5 {
  grid-column: span 5;
}

.col-span-6 {
  grid-column: span 6;
}

.col-span-7 {
  grid-column: span 7;
}

.col-span-8 {
  grid-column: span 8;
}

/* ==========================================================================
   1. STICKY HEADER COMPONENT
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.8); /* Vidro fosco translúcido claro */
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 0.0625rem solid rgba(128, 128, 128, 0.08); /* Divisor sutil inicial */
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: background-color 0.18s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.18s ease;
}

.header.scrolled {
  background-color: rgba(0, 0, 0, 0.8); /* Vidro fosco translúcido escuro ao scrollar */
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.12); /* Divisor sutil invertido */
}

.header-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  transition: padding 0.18s cubic-bezier(0.25, 1, 0.5, 1);
}

.header.scrolled .header-top {
  padding: 0.35rem 0.75rem;
  /* Aumentado o respiro lateral para 0.75rem ao rolar */
}

.header-avatar {
  background-color: #000000;
  color: #FFFFFF;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0; /* Impede compressão de largura do flexbox no estado padrão */
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 0.5rem; /* Quadrado com cantos arredondados sutil compatível com o avatar do perfil */
  transition: width 0.18s cubic-bezier(0.25, 1, 0.5, 1),
    margin-right 0.18s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.12s ease,
    visibility 0.12s ease,
    background-color 0.18s cubic-bezier(0.25, 1, 0.5, 1),
    color 0.18s ease;
  overflow: hidden;
}

.header.scrolled .header-avatar {
  /* Efeito de colapso removido para evitar tilt no layout */
  opacity: 0.8; /* Apenas uma leve transparência ao rolar */
}

.header-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.05rem;
  flex: 1; /* Ocupa todo o espaço livre e empurra o menu Kebab para a direita */
}

.header-name {
  font-weight: 800;
  font-size: clamp(1.1rem, 5vw, 1.25rem);
  line-height: 1;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header.scrolled .header-name {
  color: #FFFFFF;
  /* Inverte nome */
}

.status-on {
  font-size: 0.45em;
  vertical-align: super;
  font-weight: 700;
  margin-left: 0.125rem;
  color: var(--text-primary);
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header.scrolled .status-on {
  color: rgba(255, 255, 255, 0.8);
  /* Inverte status-on */
}

.header-status {
  font-size: clamp(0.75rem, 3.5vw, 0.85rem);
  color: var(--text-secondary);
  line-height: 1;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header.scrolled .header-status {
  color: rgba(255, 255, 255, 0.55);
  /* Inverte status secundário */
}

.header-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--text-secondary);
  opacity: 1;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header.scrolled .header-menu {
  color: rgba(255, 255, 255, 0.55);
  /* Inverte kebab menu */
}

/* ==========================================================================
   2. BOTTOM NAVIGATION & FAB COMPONENT
   ========================================================================== */
.bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.8);
  /* Vidro fosco translúcido */
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border-top: 0.0625rem solid rgba(128, 128, 128, 0.12);
  /* Divisor sutil */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.75rem;
  /* Altura fixa elegante de 44px */
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom);
  /* Apenas safe area */
  margin-top: auto;
  width: 100%;
}

.bottom-nav-item {
  flex: 1;
  height: 100%;
  /* Ocupa toda a altura da barra */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--text-secondary);
  padding: 0;
  /* Sem padding para controle absoluto de altura */
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  position: relative;
}

.bottom-nav-item svg {
  width: 1.25rem;
  /* Reduzido de 24px para 20px para visual delicado e elegante */
  height: 1.25rem;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), stroke-width 0.2s ease;
}

.bottom-nav-item.active {
  color: var(--text-primary);
}

.bottom-nav-item.active svg {
  stroke-width: 2.2 !important;
  /* Destaca o ícone ativo */
}

.fab-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  /* Necessário para o botão flutuar para cima */
  z-index: 60;
}

.fab-btn-frame {
  width: 3rem;
  /* Tamanho de 3rem (48px) para encaixe perfeito */
  height: 3rem;
  flex-shrink: 0;
  /* CRÍTICO: Impede que o flexbox do contêiner comprima a largura do botão */
  background-color: #000000;
  /* Botão Preto Sólido (sem moldura branca) */
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-mask-image: url('../assets/img/angle-square.svg');
  /* Ajustado o caminho relativo para a pasta parts/ */
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('../assets/img/angle-square.svg');
  /* Ajustado o caminho relativo para a pasta parts/ */
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transform: translateY(-1.15rem);
  /* Rebaixado para -1.15rem para encaixe perfeito e super integrado */
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.26);
  /* Sombra mais destacada */
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}

.fab-btn-frame:active {
  transform: translateY(-0.95rem) scale(0.95);
  box-shadow: 0 0.45rem 1.3rem rgba(0, 0, 0, 0.18);
}

.fab-icon {
  width: 1.75rem;
  /* Reduzido para 1.75rem (28px) para criar um efeito de "respiro" ultra elegante e premium */
  height: 1.75rem;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   3. DRAWER MENU COMPONENT
   ========================================================================== */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Fundo escuro semitransparente */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px); /* Desfoque elegante no background */
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.drawer-menu {
  position: fixed;
  top: 0;
  right: -100%; /* Inicia totalmente fora da tela à direita */
  width: 78%;
  max-width: 22rem; /* Tamanho de barra lateral ideal para mobile */
  height: 100%;
  background-color: var(--bg-color); /* Branco puro */
  border-left: 0.0625rem solid rgba(0, 0, 0, 0.08); /* Divisor esquerdo sutil */
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: -0.5rem 0 2.5rem rgba(0, 0, 0, 0.08); /* Sombra suave para profundidade */
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 1.5rem 1.25rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

.drawer-menu.open {
  right: 0; /* Desliza para dentro da tela */
}

/* Header do Drawer */
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.05);
}

.drawer-profile-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.drawer-avatar {
  width: 2.75rem;
  height: 2.75rem;
  background-color: #000000;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  border-radius: 0.65rem; /* Quadrado com cantos arredondados sutil compatível com o avatar do perfil */
}

.drawer-user-details {
  display: flex;
  flex-direction: column;
}

.drawer-name {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.1;
}

.drawer-handle {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.drawer-close-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.drawer-close-btn:active {
  opacity: 1;
}

/* Navegação do Drawer */
.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.drawer-nav-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0.5rem;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.drawer-nav-item:active {
  background-color: rgba(0, 0, 0, 0.03); /* Leve feedback cinza sutil no toque */
}

.drawer-nav-item.no-link {
  cursor: default;
}

.drawer-nav-item.no-link:active {
  background-color: transparent;
}

.chevron-icon {
  color: var(--text-secondary);
  opacity: 0.5;
}

/* Switch Toggle (Modo Social) */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 2.25rem;
  height: 1.25rem;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(128, 128, 128, 0.2);
  transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 2rem;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 0.95rem;
  width: 0.95rem;
  left: 0.15rem;
  bottom: 0.15rem;
  background-color: white;
  transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 50%;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #000000; /* Preto sólido ativo */
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(1rem);
}

/* Rodapé do Drawer */
.drawer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 0.0625rem solid rgba(0, 0, 0, 0.05);
  font-size: 0.7rem;
}

.footer-logo {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.footer-version {
  color: var(--text-secondary);
  font-weight: 500;
}