:root{
  --orkut-blue:#4a7dc9;
  --orkut-blue-dark:#35588f;
  --orkut-blue-pale:#e8ecf7;
  --bg-page:#dbe4f5;
  --bg-card:#ffffff;
  --border:#b7c6e3;
  --border-soft:#d6dfef;
  --text:#1c1e21;
  --text-muted:#5a6478;
  --link:#345b96;
  --module-header-bg: var(--orkut-blue);
}
*{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:0;
  background: var(--bg-page);
  color: var(--text);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height:1.45;
  min-height:100vh;
}
h1,h2,h3{ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin:0 0 6px; }
a{ color: var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
.hidden{ display:none !important; }

/* ---------- barra superior ---------- */
.topbar{
  background: var(--orkut-blue-dark);
  color:#fff;
  padding: 10px 16px;
  border-bottom: 3px solid var(--orkut-blue);
}
.topbar-inner{
  max-width: 900px;
  margin: 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap: 2px 12px;
}
.topbar-logo{ font-size:1.4rem; font-weight:bold; letter-spacing:-0.5px; display:flex; align-items:center; gap:8px; }
.topbar-logo-img{
  display:inline-block;
  width:32px;
  height:32px;
  flex-shrink:0;
  background-color:#fff;
  -webkit-mask-image:url('logo.svg');
  mask-image:url('logo.svg');
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.topbar-tagline{ font-size:0.78rem; opacity:0.85; }

/* ---------- portal de login (usuário / senha) ---------- */
#tela-login{ max-width: 340px; margin: 30px auto; padding: 0 14px 50px; }
.hero{ text-align:center; padding: 0 0 10px; }
.hero p.sub{ color: var(--text-muted); font-size:0.85rem; margin-top:4px; }

.login-form-box{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.login-form-box h3{
  text-align:center;
  color: var(--orkut-blue-dark);
  font-size:0.95rem;
  margin-bottom:12px;
}
.login-form-box form{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.login-form-box label{
  font-size:0.72rem;
  color: var(--text-muted);
  font-weight:bold;
  margin-bottom:-4px;
}
.login-form-box input[type="text"], .login-form-box input[type="password"],
.login-form-box textarea{
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.85rem;
  background: #fff;
  color: var(--text);
  width:100%;
}
.login-form-box textarea{ min-height:60px; resize:vertical; }
.login-form-box button[type="submit"]{
  margin-top:6px;
  background: linear-gradient(to bottom, #5f8ed4, var(--orkut-blue));
  color:#fff;
  border: 1px solid var(--orkut-blue-dark);
  border-radius: 3px;
  padding: 9px 14px;
  font-weight:bold;
  cursor:pointer;
  font-size:0.85rem;
}
.login-form-box button[type="submit"]:hover{ filter:brightness(1.05); }
.login-form-box *:focus-visible{ outline: 2px solid var(--orkut-blue-dark); }
.login-switch{
  text-align:center;
  margin-top:14px;
  font-size:0.8rem;
  color: var(--text-muted);
}
.login-switch button{
  background:none;
  border:none;
  color: var(--link);
  cursor:pointer;
  font-size:0.8rem;
  font-family:inherit;
  padding:0;
}
.login-switch button:hover{ text-decoration:underline; }
.login-msg{
  text-align:center;
  font-size:0.78rem;
  font-weight:bold;
  color: var(--orkut-blue-dark);
  min-height: 1.2em;
  margin-top:10px;
}
.avatar-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--orkut-blue-pale);
  border: 1px solid var(--border-soft);
  font-size:1.6rem;
}

/* ---------- barra de sessão (app logado) ---------- */
.session-bar{
  background: var(--orkut-blue-pale);
  border-bottom: 1px solid var(--border);
  padding: 7px 16px;
  font-size:0.78rem;
  color: var(--text-muted);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.session-bar button{
  background:#fff;
  color: var(--link);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 9px;
  font-size:0.72rem;
  cursor:pointer;
}
.session-bar button:hover{ background: var(--orkut-blue-pale); }
.session-bar button:focus-visible{ outline: 2px solid var(--orkut-blue-dark); }

/* ---------- coluna única, largura de página ---------- */
.app-main{
  max-width: 900px;
  margin: 16px auto 50px;
  padding: 0 14px;
}

/* ---------- header de perfil (full width, topo da página) ---------- */
.perfil-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.perfil-avatar{
  width: 96px;
  height: 96px;
  flex-shrink:0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow:hidden;
}
.perfil-avatar img, .perfil-avatar .avatar-fallback{ width:100%; height:100%; object-fit:cover; }
.perfil-info{ flex:1; min-width:180px; }
.perfil-info-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.perfil-info h2{ font-size:1.15rem; color: var(--orkut-blue-dark); margin:0 0 4px; }
.perfil-bio{ font-size:0.82rem; color: var(--text-muted); margin: 2px 0 8px; line-height:1.4; }
.perfil-stats{
  font-family:'Courier New', monospace;
  font-size:0.72rem;
  color: var(--text-muted);
  margin: 0 0 8px;
}

/* ---------- "estou me sentindo" (humor) ---------- */
.humor-display{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.82rem;
  color: var(--text);
  background: var(--orkut-blue-pale);
  border-radius: 4px;
  padding: 5px 9px;
  margin: 4px 0 8px;
  flex-wrap:wrap;
}
.humor-display .humor-emoji-atual{ font-size:1.15rem; }
.humor-display .humor-vazio{ color: var(--text-muted); font-style:italic; }
.humor-atualizar-btn{
  background:none;
  border:none;
  color: var(--link);
  font-size:0.7rem;
  cursor:pointer;
  padding:0;
  margin-left:auto;
}
.humor-atualizar-btn:hover{ text-decoration:underline; }
.humor-atualizar-btn:focus-visible{ outline: 2px solid var(--orkut-blue-dark); }

.humor-form{
  margin: 4px 0 10px;
  padding: 10px;
  background: var(--orkut-blue-pale);
  border-radius: 4px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.humor-emojis{ display:flex; flex-wrap:wrap; gap:4px; }
.humor-emoji-btn{
  font-size:1.1rem;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 7px;
  cursor:pointer;
  line-height:1;
}
.humor-emoji-btn:hover{ background: var(--border-soft); }
.humor-emoji-btn.selecionado{ background:#fff; border-color: var(--orkut-blue); box-shadow: 0 0 0 2px var(--orkut-blue-pale) inset, 0 0 0 1px var(--orkut-blue); }
.humor-emoji-btn:focus-visible{ outline: 2px solid var(--orkut-blue-dark); }
.humor-form input[type="text"]{
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 9px;
  font-family: inherit;
  font-size:0.82rem;
}
.humor-form-actions{ display:flex; gap:8px; }
.humor-form-actions button{
  border-radius:3px;
  padding:5px 10px;
  font-size:0.75rem;
  font-weight:bold;
  cursor:pointer;
}
.humor-form-actions button[type="submit"]{
  background: linear-gradient(to bottom, #5f8ed4, var(--orkut-blue));
  color:#fff;
  border: 1px solid var(--orkut-blue-dark);
}
.humor-form-actions button[type="button"]{
  background:#fff;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.btn-editar-perfil{
  background: var(--bg-card);
  color: var(--link);
  border: 1px solid var(--orkut-blue);
  border-radius: 3px;
  padding: 5px 12px;
  font-size:0.75rem;
  font-weight:bold;
  cursor:pointer;
  white-space:nowrap;
}
.btn-editar-perfil:hover{ background: var(--orkut-blue-pale); }
.btn-editar-perfil:focus-visible{ outline: 2px solid var(--orkut-blue-dark); }

.perfil-edit-form{
  margin-top:12px;
  padding-top:12px;
  border-top: 1px dashed var(--border);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.perfil-edit-form label{ font-size:0.72rem; color: var(--text-muted); font-weight:bold; }
.perfil-edit-form input[type="text"], .perfil-edit-form textarea{
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 7px 9px;
  font-family: inherit;
  font-size:0.82rem;
  width:100%;
}
.perfil-edit-form textarea{ min-height:60px; resize:vertical; }
.perfil-edit-actions{ display:flex; gap:8px; margin-top:2px; }
.perfil-edit-actions button{
  border-radius:3px;
  padding:6px 12px;
  font-size:0.78rem;
  font-weight:bold;
  cursor:pointer;
}
.perfil-edit-actions button[type="submit"]{
  background: linear-gradient(to bottom, #5f8ed4, var(--orkut-blue));
  color:#fff;
  border: 1px solid var(--orkut-blue-dark);
}
.perfil-edit-actions button[type="button"]{
  background:#fff;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ---------- abas horizontais (estilo Orkut) ---------- */
.tab-bar{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  margin-top:14px;
}
.tab-btn{
  all: unset;
  box-sizing:border-box;
  cursor:pointer;
  padding: 8px 16px;
  font-size:0.8rem;
  font-weight:bold;
  color: var(--orkut-blue-dark);
  background: var(--orkut-blue-pale);
  border: 1px solid var(--border);
  border-bottom:none;
  border-radius: 4px 4px 0 0;
}
.tab-btn:hover{ background:#fff; }
.tab-btn:focus-visible{ outline: 2px solid var(--orkut-blue-dark); }
.tab-btn.active{
  background: var(--bg-card);
  color: var(--orkut-blue-dark);
  border-bottom: 1px solid var(--bg-card);
  margin-bottom:-1px;
}

.tab-panel{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0 4px 4px 4px;
  padding: 14px 16px;
}
.tab-panel h2{ font-size:1rem; color: var(--orkut-blue-dark); border-bottom:1px solid var(--border-soft); padding-bottom:8px; }
.tab-panel > p{ color: var(--text-muted); font-size:0.82rem; }

/* ---------- módulos genéricos (saudômetro, trilha) ---------- */
section.panel{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 0 14px;
  margin: 16px 0 0;
  overflow:hidden;
}
section.panel h2{
  margin:0;
  background: var(--module-header-bg);
  border-bottom: 1px solid var(--orkut-blue-dark);
  color: #fff;
  font-size:0.85rem;
  padding: 8px 14px;
}
section.panel > p, section.panel > div{ padding-left:14px; padding-right:14px; }
section.panel p{ line-height:1.5; font-size:0.85rem; color: var(--text-muted); }

.saudometro-table{
  width:100%;
  border-collapse: collapse;
  margin-top:8px;
  text-align:center;
  font-family:'Courier New', monospace;
}
.saudometro-table td{
  border: 1px solid var(--border-soft);
  padding: 8px 4px;
}
.saudometro-table .num{
  font-size: 1.3rem;
  font-weight:bold;
  color: var(--orkut-blue-dark);
  font-variant-numeric: tabular-nums;
  display:block;
}
.saudometro-table .lbl{
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:0.65rem;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color: var(--text-muted);
}
.saudometro-status{
  text-align:center;
  margin-top:8px;
  font-weight:bold;
  color: var(--orkut-blue-dark);
  font-size:0.85rem;
}

/* ---------- forms compartilhados ---------- */
.recado-form, .compra-form, .post-form{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
  align-items:center;
}
.recado-form input[type="text"], .compra-form input[type="text"], .post-form input[type="file"],
.post-form input[type="date"]{
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 0.82rem;
  background: #fff;
  color: var(--text);
}
.recado-form textarea, .post-form textarea{
  width:100%;
  min-height: 70px;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 9px;
  font-family: inherit;
  font-size:0.85rem;
  background: #fff;
  color: var(--text);
  resize: vertical;
}
.recado-form button, .compra-form button, .post-form button{
  background: linear-gradient(to bottom, #5f8ed4, var(--orkut-blue));
  color:#fff;
  border: 1px solid var(--orkut-blue-dark);
  border-radius: 3px;
  padding: 7px 14px;
  font-weight:bold;
  cursor:pointer;
  font-size:0.8rem;
}
.recado-form button:hover, .compra-form button:hover, .post-form button:hover{ filter:brightness(1.05); }
.recado-form *:focus-visible, .compra-form *:focus-visible, .post-form *:focus-visible{ outline: 2px solid var(--orkut-blue-dark); }
.mural-status, .compra-status, .post-status{
  width:100%;
  font-size:0.78rem;
  font-weight:bold;
  color: var(--orkut-blue-dark);
  min-height: 1.1em;
  margin-top:2px;
}

/* ---------- cards de conteúdo (feed, mural) ---------- */
.polaroid{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 0 10px;
  overflow:hidden;
  font-size:0.85rem;
}
.polaroid img, .polaroid video{
  width:100%;
  max-height:360px;
  object-fit: cover;
  display:block;
  background: var(--orkut-blue-pale);
}
.polaroid .cap{ color: var(--text); padding: 8px 12px 0; }
.polaroid .dt{ color: var(--text-muted); font-size:0.72rem; padding: 2px 12px 0; }

.post-midias.grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:2px;
}
.post-midias.grid img, .post-midias.grid video{ max-height:220px; }

.recado-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 10px;
  display:block;
  width:auto;
  font-size:0.85rem;
  color: var(--text);
}
.recado-card .autor{
  font-weight:bold;
  color: var(--link);
  display:block;
  margin-top:6px;
  font-size:0.72rem;
}

.compra-form{ margin-top:12px; }
.compras-list{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.compra-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:#fff;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 9px 11px;
  font-size:0.85rem;
}
.compra-item.comprado{ background: var(--orkut-blue-pale); opacity:0.75; }
.compra-item.comprado .compra-texto strong{ text-decoration: line-through; }
.compra-item .check-btn{
  border: 1px solid var(--border);
  background:#fff;
  color: var(--orkut-blue);
  border-radius: 50%;
  width:22px;
  height:22px;
  flex-shrink:0;
  cursor:pointer;
  font-size:0.78rem;
  line-height:1;
  font-weight:bold;
}
.compra-item.comprado .check-btn{ background: var(--orkut-blue); color:#fff; border-color: var(--orkut-blue-dark); }
.compra-item .check-btn:focus-visible{ outline: 2px solid var(--orkut-blue-dark); }
span.check-btn{ cursor:default; display:flex; align-items:center; justify-content:center; }
.compra-texto strong{ color: var(--text); }
.compra-texto .quem{ color: var(--text-muted); font-weight:normal; font-size:0.75rem; }
.compra-texto .obs{ display:block; font-size:0.75rem; color: var(--text-muted); margin-top:2px; }
.compras-empty{
  text-align:center;
  font-size:0.82rem;
  color: var(--text-muted);
  padding: 10px 0;
}

.item-actions{
  display:flex;
  gap:10px;
  margin-top:6px;
}
.mini-btn{
  background:none;
  border:none;
  color: var(--link);
  padding:0;
  font-size: 0.72rem;
  cursor:pointer;
  font-family: inherit;
}
.mini-btn:hover{ text-decoration:underline; }
.mini-btn:focus-visible{ outline: 2px solid var(--orkut-blue-dark); }

/* mural: bilhetes fixos + recados dinâmicos ficam com a mesma cara de recado-card */
/* ---------- feed de postagens ---------- */
.feed{ display:flex; flex-direction:column; gap:14px; margin-top:12px; }
.post-card{
  margin:0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(53,88,143,0.08);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.post-card.recado-card{ padding: 0 0 10px; }
.post-card:hover{ box-shadow: 0 4px 12px rgba(53,88,143,0.14); transform: translateY(-1px); }
.post-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 12px 0;
}
.post-avatar{
  width:38px;
  height:38px;
  flex-shrink:0;
  border-radius:50%;
  overflow:hidden;
  border: 1px solid var(--border);
  background: var(--orkut-blue-pale);
}
.post-avatar img, .post-avatar .avatar-fallback{ width:100%; height:100%; object-fit:cover; }
.post-avatar .avatar-fallback{ font-size:1.1rem; }
.post-header-info{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.post-card .post-autor{
  color: var(--orkut-blue-dark);
  font-weight:bold;
  font-size:0.85rem;
}
.post-card .post-header .dt{
  color: var(--text-muted);
  font-size:0.7rem;
  padding:0;
}
.post-card .post-texto{ padding: 8px 12px 0; margin:0; line-height:1.5; }
.post-card > .item-actions{ padding: 0 12px 10px; margin-top:8px; }
.post-card > .reacoes-wrap{ padding: 0 12px 12px; }

.feed-limite-aviso{
  text-align:center;
  font-size:0.75rem;
  color: var(--text-muted);
  margin-top:10px;
}
.feed-limite-aviso button{
  background:none; border:none; color: var(--link); cursor:pointer; font-size:0.75rem; font-family:inherit; padding:0;
}
.feed-limite-aviso button:hover{ text-decoration:underline; }

.reacoes-wrap{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:10px;
}
.reacao-pill{
  background: var(--orkut-blue-pale);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px 9px;
  font-size:0.75rem;
  color: var(--text-muted);
  cursor:pointer;
}
.reacao-pill:hover{ background: var(--border-soft); }
.reacao-pill:focus-visible{ outline: 2px solid var(--orkut-blue-dark); }
.reacao-pill.bounce{ animation: pillPulse 0.25s ease; }
.reacao-pill.minha{ background: var(--orkut-blue); border-color: var(--orkut-blue-dark); color:#fff; font-weight:bold; }
.reacao-pill.minha:hover{ background: var(--orkut-blue-dark); }
@keyframes pillPulse{ 50%{ transform: scale(1.12); } }

/* ---------- aba amigos ---------- */
.amigos-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(110px,1fr));
  gap:10px;
  margin-top:10px;
}
.amigo-card{
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 8px;
  text-align:center;
  font-size:0.75rem;
}
.amigo-avatar{
  width:100%;
  aspect-ratio:1/1;
  border-radius: 3px;
  overflow:hidden;
  margin-bottom:6px;
  border: 1px solid var(--border-soft);
}
.amigo-avatar img, .amigo-avatar .avatar-fallback{ width:100%; height:100%; object-fit:cover; }
.amigo-nome{ font-weight:bold; color: var(--text); }
.amigo-bio{ color: var(--text-muted); margin-top:3px; font-size:0.68rem; }
.amigo-card .humor-display{
  font-size:0.66rem;
  padding: 3px 5px;
  justify-content:center;
  margin: 5px 0 0;
}
.amigo-card .humor-display .humor-emoji-atual{ font-size:0.95rem; }

/* ---------- aba álbum ---------- */
.album-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(130px,1fr));
  gap:10px;
  margin-top:10px;
}
.album-item{
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow:hidden;
  background:#fff;
}
.album-item img, .album-item video{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  background: var(--orkut-blue-pale);
}
.album-item .dt{
  font-size:0.65rem;
  color: var(--text-muted);
  padding: 4px 6px;
  text-align:center;
}
.album-empty{
  text-align:center;
  font-size:0.82rem;
  color: var(--text-muted);
  padding: 20px 0;
}

/* ---------- trilha sonora ---------- */
.music-toggle{ margin-top:6px; }
.music-toggle a{
  display:inline-block;
  background: linear-gradient(to bottom, #5f8ed4, var(--orkut-blue));
  color:#fff;
  border: 1px solid var(--orkut-blue-dark);
  border-radius: 3px;
  padding: 8px 16px;
  font-weight:bold;
  font-size:0.82rem;
}
.music-toggle a:hover{ filter:brightness(1.05); }
.music-toggle a:focus-visible{ outline: 2px solid var(--orkut-blue-dark); }
.notes-fly{ position:relative; height: 22px; width:100%; overflow:hidden; }
.note-emoji{
  position:absolute;
  bottom:0;
  font-size:1rem;
  opacity:0.8;
  animation: floatup 3s linear forwards;
}
@keyframes floatup{
  0%{ transform: translateY(0); opacity:0.8; }
  100%{ transform: translateY(-70px); opacity:0; }
}

footer{
  text-align:center;
  margin-top: 20px;
  color: var(--text-muted);
  font-size:0.72rem;
  padding-bottom: 10px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}