/* ======================================================
   orkut-clone — recriação nostálgica do visual original
   referência: telas reais do orkut (várias eras) fornecidas
   pelo usuário — nav escura, logo rosa, caixas com título
   simples (sem barra colorida), sidebar com lista de links
   ====================================================== */
:root {
  --rosa: #E91E8C;
  --rosa-escuro: #B8156B;
  --rosa-claro: #FF63B0;
  --rosa-suave: #FCE7F3;
  --rosa-borda: #F3B8DA;
  --navy: #1B2A4A;
  --navy-claro: #2C3F68;
  --azul-link: #3B5BDB;
  --azul-texto: #2F4A80;
  --lilas-bg: #DCE1F5;
  --lilas-borda: #C3CBEB;
  --borda: #CBD3E6;
  --laranja: #F7941D;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #d7e6f5;
  font-family: 'Trebuchet MS', 'Segoe UI', Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #222;
}
a { color: var(--azul-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { border: 0; }

.logo-wordmark {
  font-family: 'Arial Rounded MT Bold', 'Varela Round', 'Baloo 2', 'Trebuchet MS', sans-serif;
  font-weight: 900;
  font-style: normal;
  letter-spacing: -1px;
  color: var(--rosa);
}
.logo-wordmark .laranja { color: var(--rosa); }

/* ---------- Barra superior escura (nav logado) ---------- */
/* ---------- Cabeçalho interno (estilo orkut clássico: logo rosa + menu azul) ---------- */
.orkut-header { background: #fff; border-bottom: 1px solid #a7c3e0; }
.orkut-header-top {
  max-width: 1000px; margin: 0 auto; padding: 8px 14px 6px;
  display: flex; align-items: center; justify-content: flex-end; gap: 18px;
}
.header-account { font-size: 11px; color: #555; text-align: right; }
.header-account .user-email { color: #333; margin-right: 6px; font-weight: bold; }
.header-account a { color: #2f66b0; }
.header-logo {
  font-family: 'Arial Rounded MT Bold', 'Varela Round', 'Baloo 2', 'Trebuchet MS', sans-serif;
  font-weight: 900; font-size: 30px; color: var(--rosa); letter-spacing: -1.5px; line-height: 1;
}
.header-logo:hover { text-decoration: none; }

.orkut-menu { background: linear-gradient(#e2eefa, #bcd8f0); border-top: 1px solid #cfe1f2; }
.orkut-menu-inner { max-width: 1000px; margin: 0 auto; display: flex; gap: 2px; padding: 0 10px; }
.orkut-menu a {
  display: block; padding: 8px 15px; font-size: 12px; color: #25508c; font-weight: bold;
}
.orkut-menu a:hover { background: rgba(255,255,255,.55); text-decoration: none; }
.orkut-menu a.ativo {
  background: #fff; color: var(--rosa-escuro); border-top: 3px solid var(--rosa); margin-top: -1px;
}

/* ---------- Layout geral ---------- */
.wrap { max-width: 1000px; margin: 14px auto; padding: 0 12px; }
.colunas { display: flex; gap: 14px; align-items: flex-start; }
.col-esquerda { width: 190px; flex-shrink: 0; }
.col-direita { flex: 1; min-width: 0; }

/* ---------- Layout de 3 colunas (perfil / comunidade, estilo orkut clássico) ---------- */
.app-layout { display: flex; gap: 14px; align-items: flex-start; }
.col-lateral { width: 158px; flex-shrink: 0; }
.col-centro { flex: 1; min-width: 0; }
.col-lado { width: 238px; flex-shrink: 0; }

/* ---------- Side-card (menu lateral estilo Ana Letícia / comunidade) ---------- */
.side-card { background: #fff; border: 1px solid #a7c3e0; border-radius: 7px; overflow: hidden; margin-bottom: 12px; }
.side-foto { display: block; width: 100%; aspect-ratio: 1/1; }
.side-foto .avatar { width: 100%; height: 100%; border: 0; box-shadow: none; border-radius: 0; font-size: 48px; }
.side-card .side-nome { font-weight: bold; color: #2b5c96; font-size: 13px; padding: 8px 10px 0; }
.side-card .side-sub { color: #888; font-size: 11px; padding: 2px 10px 8px; line-height: 1.4; }
.side-menu { list-style: none; margin: 0; padding: 4px 0; border-top: 1px solid #e0e9f4; }
.side-menu:first-of-type { border-top: 0; }
.side-menu li { margin: 0; }
.side-menu a {
  display: flex; align-items: center; gap: 7px; padding: 5px 11px; font-size: 12px; color: #2f66b0; font-weight: bold;
}
.side-menu a .ic { font-size: 13px; width: 16px; text-align: center; filter: saturate(.8); }
.side-menu a:hover { background: #eef5fc; text-decoration: none; }
.side-menu a.ativo { background: #e3eef9; color: var(--rosa-escuro); }
.side-menu a.ativo .ic { filter: none; }

/* ---------- Miolo do perfil (estilo Ana Letícia) ---------- */
.perfil-titulo { font-size: 26px; color: #4a4a4a; font-weight: normal; line-height: 1.1; }
.breadcrumb { font-size: 11px; color: #9aa4b4; margin: 3px 0 12px; }
.breadcrumb a { color: #3b7fd0; }
.quote-box {
  background: #fff; border: 1px solid #cfe0f0; border-radius: 16px; padding: 7px 8px 7px 16px;
  font-size: 12px; color: #444; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px;
}
.quote-box .quote-txt { flex: 1; }
.btn-pill { background: #fff; border: 1px solid #b8cfe6; border-radius: 14px; padding: 4px 16px; font-size: 11px; color: #3a6ea5; cursor: pointer; font-weight: bold; white-space: nowrap; }
.btn-pill:hover { background: #eef5fc; text-decoration: none; }

/* Medidores estilo Stitch: linhas de carinhas / gelos / corações (ícones sobrepostos, sem ultrapassar a coluna central) */
.orkut-meters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; max-width: 100%; }
.meter-grp {
  font-size: 15px; line-height: 1; white-space: nowrap; display: inline-flex; max-width: 100%; overflow: hidden;
}
.meter-grp .mi { display: inline-block; margin-left: -7px; }
.meter-grp .mi:first-child { margin-left: 0; }
.meter-grp .mi.off { opacity: .18; filter: grayscale(1); }
.meter-btn { all: unset; cursor: pointer; max-width: 100%; overflow: hidden; }
.meter-btn:hover { filter: brightness(1.05); }
.meter-help {
  display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  border-radius: 50%; background: #f7b3d6; color: #fff; font-size: 10px; font-weight: bold; cursor: help;
}
.orkut-statline { font-size: 12px; color: #7a8aa0; margin: 4px 0 14px; }
.orkut-statline b { color: #3a6ea5; }

.perfil-abas { display: flex; gap: 0; margin-top: 6px; position: relative; z-index: 2; }
.perfil-abas a {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 16px; font-size: 11.5px; color: #5a86b3; background: #d3e4f4; font-weight: bold;
  border: 1px solid #a9c7e2; border-bottom: none; border-left: none; border-radius: 4px 4px 0 0;
}
.perfil-abas a:first-child { border-left: 1px solid #a9c7e2; }
.perfil-abas a .ic { font-size: 12px; }
.perfil-abas a:hover { text-decoration: none; background: #e2eef9; }
.perfil-abas a.ativo { background: #fff; color: #245488; box-shadow: inset 0 3px 0 var(--rosa); }
.painel-aba { background: #fff; border: 1px solid #a9c7e2; border-radius: 0 6px 6px 6px; overflow: hidden; margin-top: -1px; }
.visibilidade-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 11px; color: #7a8aa0; border-bottom: 1px solid #e0e9f4; }
.visibilidade-bar select { width: auto; display: inline; padding: 1px 4px; font-size: 11px; margin-left: 4px; }
.visibilidade-bar a { color: #3b7fd0; }

/* Caixa "meus amigos (0)" vazia */
.aviso-vazio-box { font-size: 12px; color: #666; padding: 2px 0 10px; }

/* Grid de miniaturas com contagem (amigos / comunidades / membros) */
.thumbs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.thumb { text-align: center; font-size: 10.5px; }
.thumb .thumb-img { width: 100%; aspect-ratio: 1/1; border: 1px solid #cfe0f0; border-radius: 2px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; font-size: 20px; overflow: hidden; }
.thumb a { color: #3a6ea5; }
.thumb .cnt { color: #9aa4b4; }
.box-rodape-links { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 12px; }
.box-rodape-links a { color: #3b7fd0; font-weight: bold; }

/* ---------- Sidebar de navegação (esquerda, presente em toda área logada) ---------- */
.sidebar-perfil { text-align: center; padding: 12px 10px; border-bottom: 1px solid var(--borda); }
.sidebar-perfil .avatar { margin: 0 auto 6px; }
.sidebar-perfil .nome { font-weight: bold; color: var(--azul-texto); font-size: 12px; }
.sidebar-perfil .legenda { color: #888; font-size: 10.5px; margin-top: 2px; }
.sidebar-nav { list-style: none; margin: 0; padding: 4px 0; }
.sidebar-nav li { border-bottom: 1px dotted #e3e7f0; }
.sidebar-nav li:last-child { border-bottom: 0; }
.sidebar-nav a, .sidebar-nav .desabilitado {
  display: block; padding: 7px 12px; font-size: 11.5px; color: #333; font-weight: bold;
}
.sidebar-nav a:hover { background: var(--rosa-suave); text-decoration: none; }
.sidebar-nav a.ativo { background: var(--rosa-suave); border-left: 3px solid var(--rosa); color: var(--rosa-escuro); padding-left: 9px; }
.sidebar-nav .desabilitado { color: #b3b3b3; cursor: default; font-weight: normal; }
.sidebar-nav .desabilitado .tag-em-breve { font-size: 9px; background: #eee; color: #999; border-radius: 6px; padding: 0 5px; margin-left: 4px; }

.box {
  background: #fff;
  border: 1px solid #a7c3e0;
  border-radius: 7px;
  margin-bottom: 12px;
  overflow: hidden;
}
.box-titulo {
  color: #2b5c96;
  font-weight: bold;
  font-size: 14px;
  padding: 9px 12px 7px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.box-titulo a { color: var(--azul-link); font-size: 10.5px; font-weight: normal; }
.box-corpo { padding: 10px 12px; }

.flash { padding: 8px 12px; margin-bottom: 10px; border-radius: 3px; font-weight: bold; }
.flash-sucesso { background: #dff3d8; border: 1px solid #8fc97a; color: #2c6b1f; }
.flash-erro { background: #fbdede; border: 1px solid #e08a8a; color: #a12525; }

/* ---------- Avatar (placeholder colorido com iniciais, estilo miniatura quadrada) ---------- */
.avatar {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: bold; border: 1px solid #fff; box-shadow: 0 0 0 1px var(--borda);
  border-radius: 2px; font-family: 'Trebuchet MS', Arial, sans-serif; flex-shrink: 0;
}
.avatar-grande { width: 130px; height: 130px; font-size: 38px; }
.avatar-media { width: 58px; height: 58px; font-size: 19px; }
.avatar-pequeno { width: 32px; height: 32px; font-size: 12px; }

/* ---------- Cabeçalho de perfil (estilo "Stitch626" / "Chico Piancó") ---------- */
.perfil-header-box { padding: 12px; display: flex; gap: 14px; align-items: flex-start; }
.perfil-header-info { flex: 1; min-width: 0; }
.perfil-nome-grande { font-size: 22px; font-weight: bold; color: var(--azul-texto); line-height: 1.1; margin-bottom: 4px; }
.perfil-sub { color: #777; font-size: 11px; margin-bottom: 6px; }
.stats-badges { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 8px; font-size: 12px; }
.stats-badges span { white-space: nowrap; }
.stats-badges b { color: var(--azul-texto); }

.tabs-perfil { display: flex; gap: 2px; border-bottom: 2px solid var(--rosa); margin: 8px 0 0; }
.tabs-perfil a {
  padding: 6px 14px; font-size: 11.5px; font-weight: bold; color: #666; background: #f2f2f2;
  border: 1px solid var(--borda); border-bottom: none; border-radius: 3px 3px 0 0;
}
.tabs-perfil a.ativo { background: var(--rosa); color: #fff; border-color: var(--rosa); }

.perfil-info-lista { list-style: none; margin: 8px 0 0; padding: 0; font-size: 11px; }
.perfil-info-lista li { padding: 3px 0; border-top: 1px dotted #ddd; }
.perfil-info-lista li:first-child { border-top: 0; }
.perfil-info-lista b { color: #555; }

.medidor { margin: 6px 0; font-size: 11px; }
.medidor-barra { background: #eee; border: 1px solid #ccc; border-radius: 8px; height: 10px; overflow: hidden; margin-top: 2px; }
.medidor-preenchido { height: 100%; }
.medidor-confiavel .medidor-preenchido { background: #5c9e5c; }
.medidor-legal .medidor-preenchido { background: var(--azul-link); }
.medidor-sexy .medidor-preenchido { background: var(--rosa); }

.botoes-acao { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.botao {
  display: inline-block; background: #f4f4f8; border: 1px solid var(--borda);
  border-radius: 3px; padding: 4px 10px; font-size: 11px; font-weight: bold; color: var(--azul-texto); cursor: pointer;
}
.botao:hover { background: var(--rosa-suave); text-decoration: none; }
.botao-laranja { background: linear-gradient(#ffd98a, var(--laranja)); border-color: #cf7c14; color: #5a3300; }
.botao-perigo { background: linear-gradient(#fbb, #e77); border-color: #c33; color: #600; }

.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini-item { text-align: center; font-size: 10px; }
.mini-item .avatar { margin: 0 auto 3px; }
.mini-item a { color: #333; }
.mini-item .contagem { color: #888; }
.ver-todos-btn { text-align: center; margin-top: 8px; }

/* ---------- Scraps / Depoimentos ---------- */
.scrap, .depoimento { border-top: 1px dotted #ddd; padding: 8px 0; display: flex; gap: 8px; }
.scrap:first-child, .depoimento:first-child { border-top: 0; }
.scrap-conteudo, .depoimento-conteudo { flex: 1; }
.scrap-autor, .depoimento-autor { font-weight: bold; color: var(--azul-texto); font-size: 11px; }
.scrap-data, .depoimento-data { color: #999; font-size: 10px; margin-bottom: 3px; }
.scrap-texto, .depoimento-texto { font-size: 12px; }
.acoes-linha { margin-top: 3px; font-size: 10px; }
.acoes-linha a, .acoes-linha button { font-size: 10px; margin-right: 8px; background: none; border: none; color: var(--azul-link); cursor: pointer; padding: 0; }
.recados-toolbar { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; color: #777; padding: 6px 0; border-top: 1px solid var(--borda); margin-top: 4px; }

textarea, input[type=text], input[type=email], input[type=password], input[type=number], select {
  font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: 12px; padding: 5px; border: 1px solid var(--borda); border-radius: 3px; width: 100%;
}
textarea { resize: vertical; min-height: 50px; }
label { font-size: 11px; font-weight: bold; color: #555; display: block; margin: 8px 0 2px; }
.campo { margin-bottom: 6px; }
.form-linha { display: flex; gap: 10px; }
.form-linha > div { flex: 1; }

/* ---------- Comunidades ---------- */
.comunidade-item { display: flex; gap: 10px; padding: 8px 0; border-top: 1px dotted #ddd; align-items: center; }
.comunidade-item:first-child { border-top: 0; }
.comunidade-nome { font-weight: bold; color: var(--azul-texto); }
.comunidade-meta { color: #999; font-size: 10px; }
.tag-categoria { display: inline-block; background: var(--rosa-suave); color: var(--rosa-escuro); border: 1px solid var(--rosa-borda); border-radius: 8px; padding: 1px 8px; font-size: 10px; }

/* ---------- Negócios (compra/venda de comunidades) ---------- */
.valor-venda { font-size: 14px; color: #1f6b1f; }
.aviso-negociacao { margin-top: 6px; font-size: 10.5px; color: #8a6d00; background: #fff8e6; border: 1px solid #f0dfa0; border-radius: 4px; padding: 6px 8px; }
.historico-precos { margin-top: 14px; border-top: 1px dotted #ddd; padding-top: 8px; }
.historico-precos-titulo { font-weight: bold; font-size: 11px; color: #3b7fd0; margin-bottom: 4px; }

/* ---------- Compartilhar convite ---------- */
.convite-compartilhar { margin-top: 8px; }
.convite-link-input { width: 100%; font-size: 11px; color: #555; background: #f7fbff; margin-bottom: 6px; }
.convite-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.botao-whatsapp { background: linear-gradient(#6fdc8c, #25d366); border-color: #1da851; color: #04390f; }
.botao-instagram { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); border-color: #c0187a; color: #fff; }

/* ======================================================
   Responsivo (celular) — a maior parte do acesso hoje é
   via celular, então o layout de colunas vira empilhado
   ====================================================== */
@media (max-width: 760px) {
  html, body { font-size: 13px; }

  .orkut-header-top { flex-wrap: wrap; justify-content: space-between; padding: 8px 10px 6px; gap: 6px; }
  .header-account { order: 2; width: 100%; text-align: left; }
  .header-logo { font-size: 24px; }

  .orkut-menu-inner {
    overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0; padding: 0 4px;
    scrollbar-width: none;
  }
  .orkut-menu-inner::-webkit-scrollbar { display: none; }
  .orkut-menu a { padding: 10px 12px; font-size: 12px; white-space: nowrap; }

  .wrap { padding: 0 8px; margin: 10px auto; }

  .colunas, .app-layout { flex-direction: column; gap: 10px; }
  .col-esquerda, .col-lateral, .col-lado, .col-direita, .col-centro { width: 100%; }

  /* ---------- Perfil no celular: grade 2x2 nostálgica ----------
     Em vez de empilhar tudo em 1 coluna, reproduz a sensação do desktop
     antigo: foto+menu à esquerda (span das 2 primeiras linhas), nome/
     ícones/fãs em cima à direita, dados do perfil embaixo à direita.
     Depois da grade: depoimentos, depois amigos, depois comunidades,
     cada um ocupando a largura inteira. */
  .app-layout.perfil-layout {
    display: grid;
    grid-template-columns: minmax(112px, 34%) 1fr;
    grid-template-areas:
      "foto cabecalho"
      "foto dados"
      "resto resto"
      "lado lado";
    gap: 8px 10px;
  }
  .app-layout.perfil-layout .col-lateral { grid-area: foto; width: auto; min-width: 0; }
  .app-layout.perfil-layout .col-centro { display: contents; }
  .app-layout.perfil-layout .perfil-cabecalho-mobile { grid-area: cabecalho; min-width: 0; }
  .app-layout.perfil-layout .perfil-dados-mobile { grid-area: dados; min-width: 0; }
  .app-layout.perfil-layout .perfil-resto-mobile { grid-area: resto; min-width: 0; }
  .app-layout.perfil-layout .col-lado { grid-area: lado; width: 100%; }

  /* nessa grade a foto+menu ficam bem estreitos — deixa mais compacto */
  .app-layout.perfil-layout .side-card .side-nome { font-size: 12px; }
  .app-layout.perfil-layout .side-card .side-sub { font-size: 10px; }
  .app-layout.perfil-layout .side-menu a { padding: 6px 8px; font-size: 11.5px; }
  .app-layout.perfil-layout .perfil-titulo { font-size: 17px; }
  .app-layout.perfil-layout .orkut-statline { font-size: 11px; }

  /* ---------- Páginas com sidebar + conteúdo (amigos, comunidades, desejos,
     fãs, buscar, convidar etc.) — mesmo espírito da grade do perfil: mantém
     a foto+menu num bloco compacto do lado, e o conteúdo da aba ocupa o
     resto, lado a lado, em vez de empilhar a foto grande em cima de tudo. */
  .colunas {
    display: grid;
    grid-template-columns: minmax(112px, 34%) 1fr;
    grid-template-areas: "foto conteudo";
    gap: 8px 10px;
    align-items: start;
  }
  .colunas .col-esquerda { grid-area: foto; width: auto; min-width: 0; }
  .colunas .col-direita { grid-area: conteudo; width: auto; min-width: 0; }
  .colunas .side-card .side-nome { font-size: 12px; }
  .colunas .side-card .side-sub { font-size: 10px; }
  .colunas .side-menu a { padding: 6px 8px; font-size: 11.5px; }

  .perfil-titulo { font-size: 20px; }

  .thumbs-grid { grid-template-columns: repeat(3, 1fr); }

  .comunidade-detalhe-cabecalho { flex-direction: column; }

  .tabela-listrada, .tabela-listrada tbody, .tabela-listrada tr, .tabela-listrada th, .tabela-listrada td {
    display: block; width: 100%;
  }
  .tabela-listrada tr { padding: 6px 0; border-bottom: 1px dotted #ddd; }
  .tabela-listrada th { color: #888; font-size: 10.5px; text-transform: uppercase; padding-bottom: 2px; }

  .botao, button, input[type=submit] { min-height: 36px; }
  input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
    font-size: 16px; /* evita o zoom automático do iOS ao focar em campos */
  }
  .form-linha { flex-direction: column; gap: 0; }

  .quote-box { border-radius: 10px; }
  .desejo-cabecalho, .candidatar-form { flex-wrap: wrap; }

  .valor-venda, .aviso-negociacao { font-size: 12px; }
}

/* ---------- O que há de novo ---------- */
.novidade-item { border-top: 1px dotted #ddd; padding: 12px 4px; }
.novidade-item:first-child { border-top: 0; }
.novidade-titulo { font-weight: bold; color: var(--azul-texto); font-size: 13px; margin-bottom: 6px; }
.novidade-texto { font-size: 12px; color: #333; line-height: 1.5; }

/* ---------- Desejos (mutirão de ajuda mútua) ---------- */
.desejo-card {
  display: block; border-top: 1px dotted #ddd; padding: 10px 4px; color: inherit;
}
.desejo-card:first-child { border-top: 0; }
.desejo-card:hover { background: #f7fbff; text-decoration: none; }
.desejo-card-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.desejo-card-titulo { font-weight: bold; color: var(--azul-texto); font-size: 13px; }
.desejo-card-desc { font-size: 11.5px; color: #555; margin: 4px 0 6px; }
.desejo-card-rodape { font-size: 10.5px; color: #888; margin-top: 4px; }
.desejo-card-dono { font-size: 10.5px; color: #888; margin: 2px 0 4px; }
.desejo-card-dono a { color: #3b7fd0; }

.progresso-bar { background: #e6edf5; border: 1px solid #cfe0f0; border-radius: 8px; height: 9px; overflow: hidden; }
.progresso-preenchido { height: 100%; background: linear-gradient(#8fce8f, #5c9e5c); }

.desejo-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.desejo-progresso-linha { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.desejo-progresso-linha .progresso-bar { flex: 1; }
.desejo-progresso-linha .progresso-pct { font-size: 11px; color: #5c9e5c; font-weight: bold; white-space: nowrap; }

.subdesejo-item { border-top: 1px dotted #ddd; padding: 10px 2px; }
.subdesejo-item:first-child { border-top: 0; }
.subdesejo-item.concluido .subdesejo-titulo { color: #999; text-decoration: line-through; }
.subdesejo-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.subdesejo-titulo { font-size: 12.5px; font-weight: bold; color: #333; }
.subdesejo-contribuintes { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.subdesejo-contribuintes .avatar { width: 22px; height: 22px; font-size: 9px; }
.subdesejo-contribuintes-label { font-size: 10.5px; color: #888; }
.candidatura-item { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 6px 8px; background: #f7fbff; border: 1px solid #dfeaf5; border-radius: 5px; }
.candidatura-item .avatar { width: 26px; height: 26px; font-size: 10px; }
.candidatura-texto { font-size: 11px; color: #444; }
.candidatura-autor { font-weight: bold; color: var(--azul-texto); font-size: 11px; }
.candidatar-form { margin-top: 8px; display: flex; gap: 6px; }
.candidatar-form input[type=text] { flex: 1; }
.candidatar-form button { white-space: nowrap; }

.comunidade-detalhe-cabecalho { display: flex; gap: 12px; padding: 10px; }
.comunidade-icone { width: 60px; height: 60px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; border-radius: 3px; flex-shrink: 0; }
.tabela-listrada { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabela-listrada tr:nth-child(odd) td, .tabela-listrada tr:nth-child(odd) th { background: #e9f1fb; }
.tabela-listrada th, .tabela-listrada td { padding: 7px 12px; vertical-align: top; }
.tabela-listrada th { width: 130px; color: #7a8aa0; font-weight: normal; text-align: right; }
.tabela-listrada td { text-align: left; color: #333; }

.topico-box { border: 1px solid var(--borda); border-radius: 4px; margin-bottom: 10px; }
.topico-cabecalho { background: #f4f4f8; padding: 6px 9px; font-weight: bold; color: var(--azul-texto); border-bottom: 1px solid var(--borda); }
.topico-corpo { padding: 8px; }

/* ---------- Login / Cadastro (páginas públicas) ---------- */
.pagina-publica {
  min-height: 100vh;
  background: var(--lilas-bg);
  display: flex; flex-direction: column;
}
.publica-conteudo-hero {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 60px;
  padding: 40px 16px; max-width: 900px; margin: 0 auto; flex-wrap: wrap;
}
.publica-hero-esquerda { max-width: 380px; }
.publica-hero-esquerda .logo-wordmark { font-size: 52px; display: block; }
.publica-tagline { color: #333; font-size: 13px; margin-top: 14px; line-height: 1.9; }

.publica-header { padding: 18px 0 0; text-align: center; }
.publica-header .logo-wordmark { font-size: 40px; }
.publica-conteudo { flex: 1; display: flex; justify-content: center; padding: 20px 10px 40px; }

.login-caixa {
  background: #fff; border: 1px solid var(--lilas-borda); border-radius: 4px; box-shadow: 0 1px 4px rgba(27,42,74,.12);
  width: 300px; padding: 16px 20px;
}
.login-caixa h2 { font-size: 12.5px; color: #333; margin: 0 0 10px; text-align: left; font-weight: bold; }
.login-caixa .botao-entrar {
  background: linear-gradient(#f7f7f7, #e2e2e2); color: #333; border: 1px solid #b8b8b8;
  border-radius: 3px; padding: 6px 22px; font-weight: bold; font-size: 12px; cursor: pointer; margin-top: 8px;
}
.login-caixa .botao-entrar:hover { background: #ececec; }
.login-rodape { font-size: 11px; margin-top: 10px; color: #666; }
.aviso-convite { background: #fff8e1; border: 1px solid #ecd090; color: #7a5c00; padding: 8px 10px; border-radius: 3px; font-size: 11px; margin-top: 12px; }
.checkbox-linha { font-size: 10.5px; display: flex; align-items: flex-start; gap: 5px; margin-top: 8px; color: #555; }
.checkbox-linha input { width: auto; margin-top: 2px; }

.cadastro-caixa { width: 420px; }

.publica-footer { text-align: center; color: #666; font-size: 10px; padding: 14px; }
.publica-footer .logo-wordmark { font-size: 16px; vertical-align: middle; margin-right: 6px; }

.erro-convite { text-align: center; color: #a12525; padding: 20px; }

.vazio { color: #999; font-style: italic; padding: 6px 0; }

.badge { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 10px; font-weight: bold; }
.badge-pendente { background: #fff3cd; color: #8a6d00; }
.badge-usado { background: #d8f3d8; color: #1f6b1f; }
.badge-expirado { background: #f3d8d8; color: #8a1f1f; }
.badge-ativo { background: #d8f3d8; color: #1f6b1f; }
.badge-banido { background: #f3d8d8; color: #8a1f1f; }

/* ======================================================
   Página de login fiel à tela do orkut.com (versão 2017)
   ====================================================== */
.login2017-body {
  background: #c9cfe7;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: 'Trebuchet MS', Verdana, Arial, sans-serif;
}
.login2017-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
}
.login2017-wrap {
  display: flex;
  gap: 24px;
  width: 100%;
  max-width: 758px;
  align-items: center;
}
.login2017-branding {
  background: #fff;
  border: 1px solid #b3bad4;
  border-radius: 4px;
  flex: 1 1 auto;
  align-self: stretch;
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.login2017-logo {
  font-family: 'Arial Rounded MT Bold', 'Varela Round', 'Baloo 2', 'Trebuchet MS', sans-serif;
  font-weight: 900;
  font-size: 62px;
  color: #e6218c;
  line-height: 1;
  letter-spacing: -2px;
}
.login2017-logo sup { font-size: 11px; font-weight: normal; color: #9aa0b0; letter-spacing: 0; margin-left: 2px; }
.login2017-taglines { list-style: none; margin: 20px 0 0; padding: 0; font-size: 12px; color: #333; line-height: 2; text-align: left; display: inline-block; }
.login2017-taglines b { color: #e6218c; }

.login2017-access { width: 250px; flex-shrink: 0; }
.access-box { background: #dceaf7; border: 1px solid #a7c3e0; border-radius: 4px; padding: 16px 18px; }
.access-flash { margin-bottom: 8px; }
.access-title { font-size: 12px; color: #333; text-align: center; margin-bottom: 12px; }
.login-fields { display: grid; grid-template-columns: auto 148px; gap: 8px 6px; align-items: center; justify-content: start; }
.login-fields label { font-size: 12px; color: #333; margin: 0; font-weight: normal; text-align: right; }
.login-fields input[type=text], .login-fields input[type=password], .login-fields input[type=email] {
  width: 148px; padding: 3px 4px; border: 1px solid #98a0bc; border-radius: 0; font-size: 12px; background: #fff;
}
.access-sub { margin-left: 51px; }
.check-row { display: flex; gap: 5px; align-items: flex-start; margin: 10px 0 2px; font-size: 11px; color: #333; }
.check-row input { width: auto; margin: 1px 0 0; }
.access-hint { font-size: 10.5px; color: #888; margin: 0 0 8px; }
.login-btn {
  padding: 3px 16px; font-size: 12px; color: #333; cursor: pointer;
  border: 1px solid #b0b0b0; border-radius: 2px; background: linear-gradient(#fcfcfc, #e2e2e2);
}
.login-btn:hover { background: linear-gradient(#fff, #dcdcdc); }

.access-divisor { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; color: #9aa4b4; font-size: 10.5px; }
.access-divisor::before, .access-divisor::after { content: ""; flex: 1; height: 1px; background: #dde3ec; }
.botao-google {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 7px 10px; font-size: 12.5px; font-weight: bold; color: #444;
  background: #fff; border: 1px solid #d0d5db; border-radius: 3px; cursor: pointer; text-decoration: none;
  box-sizing: border-box;
}
.botao-google:hover { background: #f7f8f9; text-decoration: none; }
.botao-google .g-icone { width: 16px; height: 16px; flex-shrink: 0; }

.access-recover { display: block; margin: 12px 0 0 51px; font-size: 11px; color: #3b5bdb; }
.member-box { background: #dceaf7; border: 1px solid #a7c3e0; border-radius: 4px; margin-top: 14px; padding: 14px; text-align: center; }
.member-box .q { font-size: 12px; color: #333; }
.entrar-ja { display: inline-block; margin-top: 4px; font-weight: bold; font-size: 13px; color: #333; letter-spacing: .5px; }
.entrar-ja:hover { text-decoration: none; color: #e6218c; }
.cadastro-nota { display: none; font-size: 11px; color: #7a5c00; background: #fff8e1; border: 1px solid #ecd090; border-radius: 3px; padding: 7px 9px; margin-top: 10px; text-align: left; }
.cadastro-nota:target { display: block; }

.login2017-footer { text-align: center; font-size: 11px; color: #333; padding: 12px; border-top: 1px solid #b3bad4; }
.login2017-footer a { color: #3b5bdb; }

@media (max-width: 680px) {
  .login2017-wrap { flex-direction: column; gap: 0; max-width: 340px; }
  .login2017-branding { padding: 24px 22px; }
  .login2017-logo { font-size: 48px; }
  .login2017-access { width: 100%; background: #fff; padding: 18px 22px; }
}

/* ---------- Responsivo (mobile-first: fase 3 vai aprofundar) ---------- */
@media (max-width: 720px) {
  .topbar-inner { flex-wrap: wrap; }
  .topbar-nav { order: 3; width: 100%; overflow-x: auto; }
  .topbar-busca input[type=text] { width: 110px; }
  .colunas { flex-direction: column; }
  .col-esquerda { width: 100%; }
  .publica-conteudo-hero { flex-direction: column; gap: 24px; text-align: center; }
  .publica-hero-esquerda { max-width: 100%; }
  .perfil-header-box { flex-direction: column; align-items: center; text-align: center; }
  .mini-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Compartilhar (botão flutuante, aparece em todas as páginas) ---------- */
.compartilhar-flutuante { position: fixed; right: 16px; bottom: 16px; z-index: 500; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.compartilhar-fab {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #3b7fd0, #2a5ea8); color: #fff; font-size: 22px;
  box-shadow: 0 3px 10px rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center;
}
.compartilhar-menu { display: none; flex-direction: column; gap: 6px; align-items: flex-end; margin-bottom: 2px; }
.compartilhar-menu.aberto { display: flex; }
.compartilhar-menu .botao { white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.22); }
.botao-facebook { background: linear-gradient(#6f9beb, #1877f2); border-color: #0f5bc4; color: #fff; }
.botao-email { background: linear-gradient(#f5f5f5, #ddd); border-color: #bbb; color: #333; }
@media (max-width: 760px) {
  .compartilhar-flutuante { right: 10px; bottom: 10px; }
  .compartilhar-fab { width: 48px; height: 48px; font-size: 20px; }
}