:root {
  --bg: #0a0d16;
  --bg-elevated: #131826;
  --bg-elevated-2: #1a2032;
  --border: #232a3d;
  --text: #e7eaf2;
  --text-dim: #838ba4;
  --text-faint: #5b6274;

  --gold: #d1a648;
  --gold-bright: #e6c26b;
  --silver: #b9c2d1;
  --bronze: #c1793f;

  --accent: #3d7ec9;
  --accent-2: #5865c9;
  --success: #34a06a;
  --danger: #d1495b;

  --radius: 12px;
  --radius-sm: 8px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(circle at 15% 0%, #101729 0%, transparent 55%);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  min-height: 100vh;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.topbar-title h1,
.profile-header .nome,
.view-header h2 {
  font-family: "Baloo 2", "Segoe UI", system-ui, sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: rgba(10, 13, 22, 0.9);
  backdrop-filter: blur(10px);
  z-index: 10;
}

.topbar-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-title h1 {
  font-size: 1.25rem;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.brand-accent {
  color: var(--gold-bright);
}

.brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  padding: 2px;
}

.tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-elevated);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.tab-btn {
  position: relative;
  border: none;
  background: transparent;
  color: var(--text-dim);
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tab-btn:hover {
  color: var(--text);
}

.tab-btn.is-active {
  background: var(--accent);
  color: white;
}

/* fill="currentColor" no SVG - segue a cor do proprio botao (var(--text-dim)
   normal, branco quando .is-active) em vez de ser um emoji colorido fixo. */
.tab-icon {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  margin-right: 3px;
}

/* ---- Botao de loja (Chrome/Edge/Firefox) - reusado em .hero-plugin-hint
   (dentro do hero) e .extension-promo (rodape da tela "Ao Vivo") ---- */

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.store-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.store-btn svg {
  flex: none;
}

#app {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.view {
  display: none;
}

.view.is-active {
  display: block;
  animation: fade-in 0.2s ease;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.view-header h2 {
  font-size: 1.05rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.view-subtitle {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--text-faint);
}

.live-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(52, 160, 106, 0.7);
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 160, 106, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(52, 160, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 160, 106, 0); }
}

/* ---- HERO (tela Ao Vivo) ----
   A ideia central do redesign: quantas pessoas estao estudando AGORA e' a
   informacao mais importante de toda a pagina, entao precisa ser o maior
   elemento visual dela - por isso .hero-count usa clamp() pra ficar gigante
   mesmo em telas menores, sem depender de media query separada. */

.live-hero {
  padding: 40px 32px 32px;
  margin-bottom: 28px;
  background:
    radial-gradient(circle at 85% -10%, rgba(61, 126, 201, 0.16) 0%, transparent 55%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.live-hero-stats {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 28px;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero-stat .live-pill {
  margin-bottom: 6px;
}

.hero-eyebrow {
  font-size: 0.74rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.hero-count {
  font-size: clamp(3.2rem, 9vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin: 6px 0 2px;
}

.hero-stat--secondary {
  padding-left: 40px;
  border-left: 1px solid var(--border);
}

.hero-stat--secondary .hero-time {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  margin: 6px 0 2px;
}

.hero-count-label {
  font-size: 0.82rem;
  color: var(--text-dim);
}

.live-hero-cta {
  max-width: 460px;
  margin: 0 auto;
}

/* "Voce nao esta estudando sozinho" - a principal dor de quem estuda
   sozinho em casa, resolvida por essa sala. Fica com o MESMO destaque
   visual que um botao de acao teria (bloco solido, texto grande), mas e'
   so' uma declaracao (nao ha' pra onde clicar - ver comentario no HTML). */
.hero-statement {
  padding: 15px 28px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
}

/* Convite compacto pra instalar a extensao, logo abaixo da declaracao
   principal do hero - de proposito discreto (fonte pequena, sem fundo
   proprio) pra nao competir com os numeros da sala, que sao a informacao
   mais importante da tela; mas os botoes de loja continuam no tamanho
   normal (ver .store-btn), pra nao ficarem sem graca demais. */
.hero-plugin-hint {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.hero-plugin-hint-text {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 12px;
}

.hero-plugin-hint-text strong {
  display: block;
  color: var(--text);
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.hero-plugin-hint-stores {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Nudge contextual pra criar mesa quando ha' gente estudando sozinha - UMA
   linha so', sem secao propria (sem borda/padding grande) - o essencial da
   tela (quem esta' estudando e ha' quanto tempo, logo abaixo) nao pode ficar
   mais longe por causa de um nudge secundario. */
.live-mesas-cta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.live-mesas-cta-text {
  font-size: 0.76rem;
  color: var(--text-dim);
}

.live-mesas-cta-btn {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.live-mesas-cta-btn:hover {
  background: var(--accent);
  color: white;
}

/* "Mesas com vaga agora" - mais uma linha dentro do card "Hoje, estudamos
   juntos" (ver index.html), nao uma secao propria - fica no topo da tela
   sem empurrar o numero principal (a informacao mais importante da pagina)
   pra baixo. Link inteiro clicavel (leva pra aba Mesas), por isso e' uma <a>. */
.live-mesas-banner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 700;
  transition: color 0.15s ease;
}

.live-mesas-banner:hover {
  color: var(--accent);
}

.live-mesas-banner-arrow {
  font-weight: 700;
  flex: none;
}

/* .live-mesas-cta/.live-mesas-banner definem "display" direto na classe, o
   que empata em especificidade com o "[hidden] { display: none }" padrao do
   navegador - sem isto aqui, o "display: flex" ganhava do cascade e o
   elemento continuava visivel mesmo com "hidden" (JS so' mexe no atributo,
   nunca em style inline). ".classe[hidden]" tem especificidade maior, entao
   sempre vence, nao importa a ordem. */
.live-mesas-cta[hidden],
.live-mesas-banner[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .live-hero {
    padding: 28px 20px 24px;
  }
  .live-hero-stats {
    flex-direction: column;
    gap: 20px;
  }
  .hero-stat--secondary {
    padding-left: 0;
    padding-top: 18px;
    border-left: none;
    border-top: 1px solid var(--border);
    width: 100%;
  }
}

.section-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 10px;
}

/* ---- Explicacao da extensao (rodape da tela Ao Vivo) ----
   Complementa o convite compacto do hero pra quem rolou ate' aqui querendo
   entender melhor antes de instalar. */

.extension-promo {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.extension-promo h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.extension-promo p {
  max-width: 480px;
  margin: 0 auto;
  font-size: 0.86rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.extension-promo-note {
  font-size: 0.76rem !important;
  color: var(--text-faint) !important;
  margin-top: 4px !important;
}

.extension-promo-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* ---- Avatares ---- */

.avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--bg);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar--lg {
  width: 64px;
  height: 64px;
  min-width: 64px;
  font-size: 1.25rem;
}

.avatar--sm {
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 0.72rem;
}

/* ---- Ao Vivo: cards ---- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.person-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.person-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.person-card .info {
  min-width: 0;
}

.person-card .name {
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Discreta de proposito: fica entre o nome e o cronometro, mas nao pode
   competir com nenhum dos dois (ver .name e .timer) - o cronometro segue
   sendo a informacao principal do card. Subpatente sempre embaixo da
   patente (duas linhas), nunca lado a lado. */
.person-card .patente {
  margin: 1px 0 3px;
}

.person-card .patente-nome {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-card .patente-sub {
  font-size: 0.64rem;
  font-weight: 400;
  color: var(--text-faint);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-card .timer {
  font-variant-numeric: tabular-nums;
  color: var(--success);
  font-size: 0.92rem;
  font-weight: 700;
}

.person-card .today {
  font-size: 0.74rem;
  color: var(--text-dim);
}

.person-card .mesa-tag {
  font-size: 0.72rem;
  color: var(--accent);
  margin-top: 2px;
}

.chamar-btn {
  margin-top: 8px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.chamar-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text);
}

.chamar-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

.empty-state {
  color: var(--text-dim);
  text-align: center;
  padding: 40px 12px;
  font-size: 0.9rem;
}

.empty-state-mascot {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  margin: 0 auto 14px;
  opacity: 0.65;
}

.empty-state p {
  margin: 0;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Ranking ---- */

.segmented {
  display: flex;
  gap: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 3px;
  border-radius: 9px;
}

.segmented-btn {
  border: none;
  background: transparent;
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.segmented-btn.is-active {
  background: var(--accent);
  color: white;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ranking-row {
  display: grid;
  grid-template-columns: 38px 34px 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.ranking-row:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.ranking-row .nome-col {
  /* Sem isso, um nome comprido nao encolhe dentro da coluna "1fr" (o minimo
     padrao de um item de grid e' o tamanho do proprio conteudo) - ele
     empurra a linha e quebra em 2 linhas, desalinhando o badge/avatar
     (que ficam no topo) do tempo (centralizado na altura toda da linha). */
  min-width: 0;
}

.posicao-badge {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--text-faint);
  background: var(--bg-elevated-2);
}

.ranking-row.top-1 .posicao-badge { background: var(--gold); color: #241a00; }
.ranking-row.top-2 .posicao-badge { background: var(--silver); color: #1a1e28; }
.ranking-row.top-3 .posicao-badge { background: var(--bronze); color: #24140a; }

.ranking-row .nome-col .nome {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.ranking-row.top-1 .bar-fill { background: var(--gold); }
.ranking-row.top-2 .bar-fill { background: var(--silver); }
.ranking-row.top-3 .bar-fill { background: var(--bronze); }

.ranking-row .tempo {
  font-weight: 700;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Perfil ---- */

.profile-header {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.profile-header .nome {
  font-size: 1.2rem;
  font-weight: 700;
}

/* Duas linhas (patente + subpatente, ver PatenteConfig no backend) em vez
   do antigo "Nível N · Nome" numa linha so' - continua discreta, so' um
   pouco mais alta pra caber a subpatente sem aumentar a fonte. */
.level-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  padding: 4px 10px;
  border-radius: 10px;
  margin-top: 6px;
}

.level-pill-patente {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.level-pill-subpatente {
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.01em;
  color: var(--text-dim);
}

.level-progress-wrap {
  flex: 1;
  min-width: 180px;
}

.level-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.stat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}

.stat-card .valor {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.stat-card .rotulo {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.stat-card.streak .valor { color: var(--gold-bright); }

.section-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}

.section-card h3 {
  font-size: 0.78rem;
  margin-bottom: 16px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.chart-14d {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 110px;
}

.chart-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
}

.chart-bar {
  width: 100%;
  max-width: 20px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  min-height: 3px;
}

.chart-bar.is-today {
  background: var(--gold);
}

.chart-bar-label {
  font-size: 0.64rem;
  color: var(--text-faint);
}

/* ---- Diario de estudos (perfil) - dentro do card "Ultimos 14 dias" ---- */

.diario {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.section-card .diario-titulo {
  margin: 0 0 12px;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.diario-calendario-btn {
  margin: 12px 0 4px;
  background: var(--bg-elevated-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.diario-calendario-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* Modal do calendario do diario */
.cal-modal {
  max-width: 400px;
  text-align: left;
}

.cal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 10px;
}

.cal-mes {
  font-weight: 700;
}

.cal-nav {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.cal-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.cal-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-semana {
  text-align: center;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 2px;
}

.cal-dia {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.85rem;
  cursor: default;
  padding: 0;
}

.cal-dia.is-hoje {
  border-color: var(--border);
}

.cal-dia.tem-diario {
  background: var(--bg-elevated-2);
  color: var(--text);
  cursor: pointer;
}

.cal-dia.tem-diario:hover,
.cal-dia.is-selecionado {
  border-color: var(--accent);
}

.cal-fogo {
  font-size: 0.7rem;
  line-height: 1;
}

.cal-detalhe {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.diario-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.diario-select,
.diario-input {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 12px;
  font-size: 0.85rem;
  font-family: inherit;
  color-scheme: dark;
}

.diario-select {
  flex: 0 0 auto;
}

.diario-input {
  flex: 1 1 240px;
  min-width: 0;
}

.diario-select:focus,
.diario-input:focus {
  outline: none;
  border-color: var(--accent);
}

.diario-btn {
  flex: none;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.diario-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.diario-erro {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--danger);
}

.diario-vazio {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: var(--text-faint);
}

.diario-dias {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

.diario-dia-topo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 6px;
}

.diario-dia-rotulo {
  font-size: 0.85rem;
  font-weight: 800;
}

.diario-dia.is-hoje .diario-dia-rotulo {
  color: var(--gold-bright);
}

.diario-dia-meta {
  font-size: 0.72rem;
  color: var(--text-faint);
}

.diario-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.diario-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-elevated-2);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.84rem;
  line-height: 1.4;
}

.diario-item-texto {
  min-width: 0;
  overflow-wrap: anywhere;
}

.diario-remover {
  flex: none;
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 0.8rem;
  color: var(--text-faint);
  cursor: pointer;
}

.diario-remover:hover:not(:disabled) {
  color: var(--danger);
}

.diario-remover:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 640px) {
  .diario-select,
  .diario-btn {
    flex: 1 1 100%;
  }
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.badge-item:not(.locked):hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}

.badge-item.locked {
  opacity: 0.55;
}

.badge-icon {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--gold);
}

.badge-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.badge-item.locked .badge-icon {
  border-color: var(--border);
}

.badge-item .badge-nome {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
}

.profile-empty {
  color: var(--text-dim);
  text-align: center;
  padding: 60px 12px;
}

/* ---- Compartilhar conquistas ---- */

.share-btn {
  margin-left: auto;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.share-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.share-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 12, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
  animation: fade-in 0.15s ease;
}

.share-modal {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}

.share-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}

.share-modal-close:hover {
  color: var(--text);
  border-color: var(--accent);
}

.share-modal-loading {
  color: var(--text-dim);
  font-size: 0.85rem;
  padding: 90px 0;
}

.share-modal-preview {
  width: 100%;
  border-radius: var(--radius-sm);
  display: block;
  margin-top: 8px;
}

.share-modal-hint {
  font-size: 0.72rem;
  color: var(--text-faint);
  margin: 10px 0 0;
}

.share-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.btn-share {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--border);
  transition: transform 0.15s ease;
}

.btn-share:hover {
  transform: translateY(-1px);
}

.btn-share-download {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-share-native {
  background: var(--bg-elevated-2);
  color: var(--text);
}

/* ---- Hall da Fama ---- */

.hall-group {
  margin-bottom: 22px;
}

.hall-group-title {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 10px;
}

.hall-period-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

.hall-period-label {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.hall-podium {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---- Corujão ---- */

.corujao-banner {
  display: flex;
  align-items: stretch;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}

.corujao-banner-img {
  flex: 0 0 200px;
  align-self: stretch;
}

.corujao-banner-img img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
}

.corujao-banner-info {
  flex: 1;
  min-width: 0;
  padding: 18px 20px;
}

.corujao-banner-info h3 {
  font-family: "Baloo 2", "Segoe UI", system-ui, sans-serif;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.corujao-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.corujao-status.is-ativo {
  color: var(--danger);
  border-color: var(--danger);
}

.corujao-status.is-agendado {
  color: var(--gold-bright);
  border-color: var(--gold);
}

.corujao-periodo {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.corujao-descricao {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--text-faint);
  line-height: 1.5;
}

.corujao-subtabs {
  margin-bottom: 16px;
}

.corujao-ranking-title {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 10px;
}

/* ---- Mesas de Estudo ---- */

.mesas-sem-extensao {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 16px;
  text-align: center;
}

/* Cards de mesa cadastrada (lista "Encontrar mesa") - fixo em 3 colunas
   por pedido explicito, diferente do .card-grid (auto-fill) usado na Ao
   Vivo, que pode chegar a 4. */
.mesas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* ---- Top 5 do dia/semana (geral, ver mesas.js::renderTop5Secao) ---- */

/* Duas colunas principais da tela de Mesas: concursos (940px = a mesma largura
   que a grade de 3 colunas sempre teve dentro do #app de 980px) a' esquerda,
   Top 5 dia/semana a' direita. O #app padrao (980px) e' estreito demais pra
   isso, entao so' nesta tela ele alarga (940 + 20 de respiro + 300 da lateral
   + 40 de padding = 1300px) - as demais telas nao mudam. */
#app:has(#view-mesas.is-active) {
  max-width: 1300px;
}

.mesas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

.mesas-layout-principal {
  min-width: 0;
}

/* Detalhe de uma mesa nao tem lateral - continua com a largura de sempre em
   vez de esticar pelos 1300px do #app alargado. */
.mesa-detalhe {
  max-width: 1100px;
}

/* Topo da mesa: foto do concurso como fundo, tingida pela cor do tema (mesma
   receita do .mesa-card--oficial.mesa-card--com-imagem::before). */
.mesa-detalhe-topo {
  --mesa-cor-tema: var(--accent);
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--mesa-cor-tema) 0%, rgba(0, 0, 0, 0.45) 130%);
}

.mesa-detalhe-topo--com-imagem::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--mesa-cor-tema) 65%, transparent) 0%,
      color-mix(in srgb, var(--mesa-cor-tema) 35%, black) 100%
    ),
    var(--mesa-imagem);
  background-size: cover;
  background-position: center;
}

.mesa-detalhe-topo-info {
  min-width: 0;
  flex: 1;
}

.mesa-detalhe-topo .mesa-badge-concurso {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .mesa-detalhe-topo {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
  }
}

.top5-secao {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Sem espaco pra lateral: empilha (concursos em cima, rankings embaixo, lado
   a lado quando couber). */
@media (max-width: 1180px) {
  .mesas-layout {
    grid-template-columns: 1fr;
  }
  .top5-secao {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.top5-painel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.top5-titulo {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
  margin-bottom: 10px;
}

.top5-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.top5-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}

.top5-linha:hover {
  background: var(--bg-elevated-2);
}

.top5-posicao {
  width: 26px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dim);
  flex-shrink: 0;
}

.top5-info {
  flex: 1;
  min-width: 0;
}

.top5-nome {
  font-size: 0.85rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top5-patente {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- Mesa oficial: hero (destaque) + grade compacta ---- */

.mesas-secao-titulo {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin: 22px 0 12px;
}

.mesa-hero {
  --mesa-cor-tema: var(--accent);
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65)),
    linear-gradient(135deg, var(--mesa-cor-tema), var(--bg-elevated) 70%);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--mesa-cor-tema);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  justify-content: flex-end;
}

/* Foto enviada no /admin (ver --mesa-imagem, setado inline por mesa.js) no
   lugar do degrade liso - a MESMA carta continua legivel por cima (overlay
   escuro listado PRIMEIRO = fica por CIMA da foto no empilhamento de
   backgrounds do CSS). */
.mesa-hero--com-imagem {
  background-image:
    linear-gradient(160deg, rgba(8, 10, 18, 0.35), rgba(8, 10, 18, 0.88) 80%),
    var(--mesa-imagem);
}

.mesa-hero-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.mesa-hero-ao-vivo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}

.mesa-hero-avatares {
  margin: 0;
}

.mesa-hero-titulo {
  font-family: "Baloo 2", "Segoe UI", system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  cursor: pointer;
}

.mesa-hero-btn {
  align-self: flex-start;
  padding: 10px 22px;
  border-radius: 999px;
  border: none;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  background: white;
  color: #1a1200;
  transition: transform 0.15s ease;
}

.mesa-hero-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.mesa-hero-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

/* "Entrar" no card compacto - mesma cara do botao do card em destaque, na
   largura do card. */
.mesa-card-entrar-btn {
  width: 100%;
  padding: 9px 12px;
  border-radius: 999px;
  border: none;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  background: white;
  color: #1a1200;
  transition: transform 0.15s ease;
}

.mesa-card-entrar-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.mesa-card-entrar-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.mesa-progresso-grupo {
  margin: 4px 0;
}

.mesa-progresso-grupo-label {
  font-size: 0.78rem;
  color: var(--text);
  margin-bottom: 6px;
}

.mesa-progresso-grupo-valor {
  color: var(--gold-bright);
  font-weight: 700;
}

.mesa-progresso-grupo-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.mesa-progresso-grupo-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.mesa-badge-modo {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.mesa-badge-modo--sm {
  justify-content: center;
  font-size: 0.68rem;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  width: 100%;
}

.mesa-card-concurso {
  font-size: 0.68rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mesa-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mesa-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

/* Mesa oficial: fundo TOMADO pela cor do concurso (--mesa-cor-tema, definida
   inline por mesa.js a partir do que o admin escolheu) em vez de um card
   escuro com so' um filete colorido - pedido explicito pra' bater com o
   visual das salas oficiais na referencia. Degrade pra' preto (nao pra' uma
   segunda cor fixa) funciona com QUALQUER cor_tema escolhida no admin, sem
   precisar calcular um tom mais escuro daquela cor especifica. */
.mesa-card--oficial {
  position: relative;
  z-index: 0; /* ancora o empilhamento do ::before de imagem (ver .mesa-card--com-imagem::before) */
  background: linear-gradient(165deg, var(--mesa-cor-tema, var(--accent)) 0%, rgba(0, 0, 0, 0.45) 130%);
  border-color: rgba(255, 255, 255, 0.12);
  overflow: hidden; /* recorta a foto de fundo nos cantos arredondados do card */
}

.mesa-card--oficial:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

/* Foto enviada no /admin como plano de fundo do card, por cima do degrade de
   cor e por baixo do conteudo - mesma tecnica do .mesa-hero--com-imagem
   (degrade translucido EMPILHADO com a foto no proprio background-image,
   listado primeiro = fica visualmente por cima dela) em vez de "opacity" na
   caixa inteira: opacity 0.3 deixava a foto quase invisivel por cima de uma
   cor ja' bem opaca (pedido explicito pra' corrigir isso).
   color-mix() tinge o degrade com a PROPRIA cor_tema da mesa (em vez de um
   preto neutro) - pedido explicito pra' a foto ficar com a cor do concurso
   por cima, nao cinza/preto generico; "transparent"/"black" no color-mix()
   controlam quanto da foto aparece por baixo em cada ponto. z-index negativo
   pinta ANTES dos filhos flex do card (ver ordem de pintura do CSS: filhos
   com z-index negativo vem antes dos filhos normais em fluxo), entao fica
   atras do titulo/rodape sem precisar dar z-index em cada um deles. */
.mesa-card--oficial.mesa-card--com-imagem::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--mesa-cor-tema, var(--accent)) 65%, transparent) 0%,
      color-mix(in srgb, var(--mesa-cor-tema, var(--accent)) 35%, black) 100%
    ),
    var(--mesa-imagem);
  background-size: cover;
  background-position: center;
}

.mesa-card--oficial .mesa-card-nome {
  color: #fff;
  text-transform: uppercase;
}

.mesa-card--oficial .mesa-card-ocupacao {
  color: rgba(255, 255, 255, 0.9);
}

.mesa-badge-concurso {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  object-fit: cover;
}

.mesa-card-footer {
  padding-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mesa-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mesa-card-titulos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mesa-card-nome {
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.25;
}

.mesa-card-participantes {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.4;
}

.mesa-card-ocupacao {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.mesa-card-avatares {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 4px;
}

/* Dentro do rodape (mesa oficial) o avatar-stack fica lado a lado com
   "N focando agora", sem a margem pensada pra' quando era um bloco sozinho
   (ver renderCardOficial em mesas.js). */
.mesa-card-footer .mesa-card-avatares {
  margin: 0;
  flex-wrap: nowrap;
}

.mesa-card-vagas {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.mesa-card-vagas.tem-vaga {
  color: var(--success);
  background: rgba(52, 160, 106, 0.12);
  padding: 3px 10px;
  border-radius: 999px;
}

.mesa-card-vagas.cheia {
  color: var(--text-faint);
  background: var(--bg-elevated-2);
  padding: 3px 10px;
  border-radius: 999px;
}

.mesa-card-vagas.privada {
  color: #1a1200;
  background: var(--gold-bright);
  padding: 3px 10px;
  border-radius: 999px;
}

.mesa-card-vagas-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.mesa-card-ocupacao {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.mesa-entrar-btn {
  width: 100%;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: white;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.mesa-entrar-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.mesa-entrar-btn:disabled {
  background: transparent;
  border-color: var(--border);
  color: var(--text-faint);
  cursor: default;
}

.mesa-convite-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
}

.mesa-convite-acoes {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.mesa-voltar {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin-bottom: 14px;
}

.mesa-voltar:hover {
  color: var(--text);
}

.mesa-detalhe-titulo {
  font-family: "Baloo 2", "Segoe UI", system-ui, sans-serif;
  margin: 0 0 4px;
}

.mesa-detalhe-meta {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}

.mesa-detalhe-meta-valor {
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

/* ---- Corrida ate' a meta (dentro de uma mesa - ver mesas.js::renderCorrida) ---- */

.mesa-race {
  margin: 18px 0;
}

.mesa-race-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
}

.mesa-race-total-valor {
  font-family: "Baloo 2", "Segoe UI", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.mesa-race-total-label {
  font-size: 0.76rem;
  color: var(--text-dim);
}

.mesa-race-header {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.mesa-race-lanes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mesa-lane {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mesa-lane-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.mesa-lane--vazia .mesa-lane-info {
  cursor: default;
}

.mesa-lane-textos {
  flex: 1;
  min-width: 0;
}

.mesa-lane-nome {
  font-weight: 600;
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mesa-lane-nome--vazia {
  color: var(--text-faint);
  font-style: italic;
  font-weight: 400;
}

.mesa-lane-patente-nome {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-faint);
}

.mesa-lane-patente-sub {
  font-size: 0.64rem;
  color: var(--text-faint);
  opacity: 0.8;
}

.mesa-lane-tempo {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--success);
  white-space: nowrap;
  flex: none;
}

.mesa-lane-tempo.is-paused {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.76rem;
}

.mesa-lane-tempo.is-finished {
  color: var(--gold-bright);
}

.mesa-lane-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  margin: 10px 0 2px 42px; /* alinha com o inicio do texto (32px do avatar--sm + 10px de gap) */
}

.mesa-lane-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--gold-bright));
  transition: width 0.6s ease;
}

.mesa-lane-flag {
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.85;
}

.mesa-lane.is-paused {
  border-color: var(--border);
}

.mesa-lane.is-paused .avatar {
  filter: grayscale(1);
  opacity: 0.6;
}

.mesa-lane.is-paused .mesa-lane-fill {
  background: var(--text-faint);
}

.mesa-lane.is-finished {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(209, 166, 72, 0.08), transparent 60%);
}

.mesa-lane.is-finished .mesa-lane-fill {
  background: var(--gold-bright);
}

.mesa-lane--vazia {
  border-style: dashed;
  background: transparent;
}

.mesa-lane--vazia .avatar {
  border: 2px dashed var(--border);
  background: transparent;
}

.mesa-convidar-inline {
  margin-top: 16px;
}

.mesa-convidar-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 10px;
}

.mesa-convidar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.85rem;
}

.mesa-convidar-item:hover {
  background: var(--bg-elevated-2);
}

.mesa-convidar-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex: none;
}

.mesa-convidar-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mesa-convidar-item .chamar-btn {
  margin-top: 0;
  width: auto;
  margin-left: auto;
}

.mesa-modal {
  max-width: 420px;
  text-align: left;
}

.mesa-modal-titulo {
  font-family: "Baloo 2", "Segoe UI", system-ui, sans-serif;
  text-align: center;
  margin: 0 0 16px;
}

.mesa-form-label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 6px;
}

.mesa-meta-badge {
  margin-left: 8px;
  color: var(--gold-bright);
  font-weight: 700;
}

/* Numerozinho de aviso na aba "Mesas de Estudo" - visivel em qualquer tela
   do site, nao so' quando a pessoa esta' navegando ali (ver
   NotificacaoGlobal em app.js). */
.tab-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

/* ---- Rodape ---- */

.data-notice {
  font-size: 0.72rem;
  color: var(--text-faint);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 16px;
}

@media (max-width: 640px) {
  .topbar {
    padding: 12px 16px;
  }
  .brand-logo {
    width: 30px;
    height: 30px;
  }
  .tabs {
    /* Se mesmo com o padding/fonte menores os 4 botoes nao couberem numa
       tela bem estreita, rola de lado em vez de quebrar o texto de algum
       deles em 2 linhas (o que ficava feio e desalinhava a barra). */
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tab-btn {
    padding: 6px 11px;
    font-size: 0.76rem;
  }
  .ranking-row {
    grid-template-columns: 30px 32px 1fr auto;
    gap: 8px;
    padding: 9px 11px;
  }
  .empty-state-mascot {
    width: 56px;
    height: 56px;
  }
  .profile-header {
    padding: 16px;
    gap: 14px;
  }
  .profile-header .nome {
    font-size: 1.05rem;
  }
  .level-progress-label {
    flex-direction: column;
    gap: 3px;
  }
  .badges-grid {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  }
  .badge-icon {
    width: 52px;
    height: 52px;
  }
  .corujao-banner {
    flex-direction: column;
  }
  .corujao-banner-img {
    flex-basis: auto;
  }
  .corujao-banner-img img {
    max-height: 160px;
    min-height: 0;
  }
  .corujao-banner-info {
    padding: 14px 16px;
  }
  .mesas-grid {
    grid-template-columns: 1fr;
  }
  .mesa-lane-track {
    margin-left: 0;
  }
  .mesa-lane-patente-sub {
    display: none; /* linha extra some no mobile pra' cada corredor caber sem ficar alto demais */
  }
}