@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;600&display=swap');
/* =========================================================
   jOTa — Topbar (Brasao Segmentado / Proposta III)
   Paleta completa escopada em .jota-topbar (o jota.css so
   define um subset e com nomes proprios). Nao polui o :root.
   ========================================================= */
.jota-topbar{
  --navy:#0b1322; --navy-2:#131e36; --navy-3:#1c2a48;
  --parchment:#f1e3bf; --parchment-2:#e8d6a4;
  --ink:#2a1a0e; --ink-soft:#4a2f1c;
  --gold:#c9a85a; --gold-hi:#efd58a; --gold-lo:#8e7233;
  --crimson:#8a1f2b; --crimson-hi:#a8313e; --crimson-lo:#5d141c;
  --teal:#2d9b8e; --teal-hi:#54bdaf;
  --green-live:#4caf6f;

  display: grid;
  grid-template-columns: 280px 1fr 240px;
  height: 60px;
  margin-bottom: var(--gap, 14px);
  background: var(--navy-2);
  border-top: 1px solid var(--gold-lo);
  border-bottom: 1px solid var(--gold-lo);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  font-family: "Cormorant Garamond", Georgia, serif;
}
/* ===== Zona Status (esquerda) ===== */
.jota-topbar .zone-status{
  background: linear-gradient(180deg, var(--navy-3) 0%, var(--navy-2) 100%);
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding: 0 22px; gap: 2px;
  position: relative;
}
.jota-topbar .zone-status::after{
  content: ""; position: absolute; right: -1px; top: 0; bottom: 0;
  width: 12px;
  background: linear-gradient(90deg, var(--crimson) 0%, var(--crimson-lo) 100%);
  clip-path: polygon(
    0 0, 100% 0,
    50% 8%, 100% 16%, 50% 24%, 100% 32%, 50% 40%,
    100% 48%, 50% 56%, 100% 64%, 50% 72%, 100% 80%,
    50% 88%, 100% 96%, 100% 100%, 0 100%
  );
  box-shadow: 1px 0 4px rgba(0,0,0,.3);
}
.jota-topbar .zone-status .top-line{
  display: flex; align-items: center; gap: 7px;
  font-family: "Cinzel", serif;
  font-size: 12px; font-weight: 600;
  color: var(--parchment);
  letter-spacing: .12em;
}
.jota-topbar .pulse{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-live);
  box-shadow: 0 0 0 0 rgba(76,175,111,.6);
  animation: jota-pulse 2s infinite;
  flex: 0 0 8px;
}
@keyframes jota-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(76,175,111,.6) }
  70%  { box-shadow: 0 0 0 8px rgba(76,175,111,0) }
  100% { box-shadow: 0 0 0 0 rgba(76,175,111,0) }
}
.jota-topbar .zone-status .top-line strong{
  color: var(--gold-hi); font-weight: 700;
}
.jota-topbar .zone-status .bot-line{
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-size: 13px;
  color: rgba(241,227,191,.6);
}
.jota-topbar .zone-status .bot-line a{
  color: var(--teal-hi);
  font-style: normal; font-weight: 600;
  font-family: "Cinzel", serif;
  font-size: 11px; letter-spacing: .12em;
  margin-left: 4px;
  text-decoration: none;
  transition: color .15s ease;
}
.jota-topbar .zone-status .bot-line a:hover{ color: var(--gold-hi) }
/* ===== Zona Acoes (centro) ===== */
.jota-topbar .zone-ctas{
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.018) 2px 4px),
    linear-gradient(180deg, var(--parchment) 0%, var(--parchment-2) 100%);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: stretch;
  padding: 0 12px;
}
.jota-topbar .zone-ctas .cta{
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: "Cinzel", serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
  transition: all .15s ease;
  padding: 0 6px;
  position: relative;
  text-decoration: none;
}
.jota-topbar .zone-ctas .cta + .cta::before{
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-lo), transparent);
  opacity: .5;
}
.jota-topbar .zone-ctas .cta svg{
  width: 16px; height: 16px;
  color: var(--crimson-lo);
  transition: all .15s ease;
  flex: 0 0 16px;
}
.jota-topbar .zone-ctas .cta:hover{ color: var(--crimson) }
.jota-topbar .zone-ctas .cta:hover svg{ color: var(--crimson); transform: scale(1.1) }
/* ===== Zona Conta (direita) ===== */
.jota-topbar .zone-account{
  background: linear-gradient(180deg, var(--navy-3) 0%, var(--navy-2) 100%);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 22px; gap: 14px;
  position: relative;
}
.jota-topbar .zone-account::before{
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0;
  width: 12px;
  background: linear-gradient(90deg, var(--crimson-lo) 0%, var(--crimson) 100%);
  clip-path: polygon(
    100% 0, 0 0, 0 100%, 100% 100%,
    50% 96%, 0 88%, 50% 80%, 0 72%, 50% 64%,
    0 56%, 50% 48%, 0 40%, 50% 32%, 0 24%,
    50% 16%, 0 8%
  );
  box-shadow: -1px 0 4px rgba(0,0,0,.3);
}
/* deslogado */
.jota-topbar .auth-anon{
  display: flex; align-items: center; gap: 10px;
}
.jota-topbar .auth-anon a{
  font-family: "Cinzel", serif; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--parchment); font-weight: 600;
  text-decoration: none;
  transition: color .15s ease;
}
.jota-topbar .auth-anon .login{
  color: rgba(241,227,191,.65);
}
.jota-topbar .auth-anon .login:hover{ color: var(--gold-hi) }
.jota-topbar .auth-anon .signup{
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-lo) 100%);
  color: var(--navy);
  padding: 6px 14px; border-radius: 2px;
  box-shadow: 0 2px 6px rgba(201,168,90,.25), inset 0 1px 0 rgba(255,255,255,.2);
  transition: background .15s ease;
}
.jota-topbar .auth-anon .signup:hover{
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 100%);
}
/* logado */
.jota-topbar .auth-logged{
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.jota-topbar .auth-logged .avatar{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--gold-hi), var(--gold-lo) 70%);
  display: flex; align-items: flex-end; justify-content: center;
  border: 2px solid var(--gold);
  overflow: hidden;
  flex: 0 0 34px;
  transition: border-color .15s ease, transform .15s ease;
}
.jota-topbar .auth-logged:hover .avatar{
  border-color: var(--gold-hi);
  transform: scale(1.05);
}
.jota-topbar .auth-logged .avatar img{
  image-rendering: pixelated;
  transform: scale(1.4); transform-origin: center bottom;
  max-width: 100%; max-height: 100%;
}
.jota-topbar .auth-logged .who{
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 1px;
  min-width: 0;
}
.jota-topbar .auth-logged .who .name{
  font-family: "Cinzel", serif; font-size: 12px;
  font-weight: 600; color: var(--parchment);
  letter-spacing: .06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 110px;
}
.jota-topbar .auth-logged .who .points{
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px; color: var(--gold-hi);
  display: inline-flex; align-items: center; gap: 4px;
}
.jota-topbar .auth-logged .who .points::before{
  content: "\25C8"; color: var(--teal); font-size: 10px;
}
/* ===== Responsivo ===== */
@media (max-width: 900px){
  .jota-topbar{
    grid-template-columns: 1fr;
    height: auto;
  }
  .jota-topbar .zone-status::after,
  .jota-topbar .zone-account::before{ display: none }
  .jota-topbar .zone-status,
  .jota-topbar .zone-account{ padding: 12px 16px }
  .jota-topbar .zone-account{ justify-content: center }
  .jota-topbar .zone-ctas{
    grid-template-columns: repeat(3, 1fr);
    padding: 8px 6px;
  }
  .jota-topbar .zone-ctas .cta{
    flex-direction: column; padding: 14px 4px; gap: 4px;
  }
  .jota-topbar .zone-ctas .cta + .cta::before{ display: none }
}