.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: #1e293b; color: #f8fafc; padding: .65rem 1.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.brand a { font-weight: 700; letter-spacing: .12em; text-decoration: none; color: #f8fafc; }
.brand .tag {
  display: inline-block; margin-left: .5rem; padding: .1rem .4rem;
  background: #f97316; color: #1e293b; border-radius: 999px;
  font-size: .65rem; font-weight: 600; text-transform: uppercase;
}
.topnav { display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
.topnav a {
  padding: .35rem .75rem; border-radius: 4px; text-decoration: none;
  color: #cbd5e1; font-size: .92rem;
}
.topnav a:hover { background: #334155; color: #f8fafc; }
.topnav a.active { background: #f97316; color: #1e293b; font-weight: 600; }
.topnav .logout { display: inline; margin-left: .5rem; }
.topnav .logout button {
  background: transparent; color: #cbd5e1; border: 1px solid #475569;
  padding: .3rem .7rem; border-radius: 4px; cursor: pointer;
}
.topnav .logout button:hover { background: #334155; color: #f8fafc; }
.subnav {
  background: #e2e8f0; padding: .3rem 1.25rem; display: flex; flex-wrap: wrap;
  gap: .25rem .75rem; border-bottom: 1px solid #cbd5e1; font-size: .85rem;
}
.subnav a {
  color: #1e3a8a; text-decoration: none;
  padding: .1rem .35rem; border-radius: 3px;
}
.subnav a + a { border-left: 1px solid #94a3b8; padding-left: .8rem; }
.subnav a:hover { background: #cbd5e1; text-decoration: underline; }
.topnav a .badge {
  display: inline-block; margin-left: .25rem; padding: 0 .35rem;
  background: #f97316; color: #1e293b; border-radius: 999px;
  font-size: .65rem; font-weight: 600;
}
.lang-form { display: inline-block; margin-left: .5rem; }
.lang-form select {
  background: transparent; color: #cbd5e1; border: 1px solid #475569;
  padding: .3rem .5rem; border-radius: 4px; font-size: .85rem;
}