/* Top bar, page width and two-column layouts */
.topbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a { color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.topbar nav a.active { background: var(--accent-soft); color: var(--accent); }
.tab-icon { margin-inline-end: 4px; }
.spacer { flex: 1; }
.badge { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--lead); }
.badge.on { background: #dcfce7; color: var(--ok); }

main { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }

.sim-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.conv-layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; }
@media (max-width: 800px) { .sim-layout, .conv-layout { grid-template-columns: 1fr; } }