/* Top bar fija con contador y botones */
.topbar{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #fff; border-bottom: 1px solid #eee;
}
.topbar .logo{ font-weight: 800; text-decoration: none; color:#111; }
.topbar .spacer{ flex:1; }
.badge{ background:#f5f5f5; border:1px solid #e5e5e5; padding:4px 8px; border-radius:999px; font-weight:600; }
.badge.warn{ color:#b45309; background:#fff7ed; border-color:#fed7aa; }
.badge.ok{ color:#065f46; background:#ecfdf5; border-color:#a7f3d0; }
.pill{ border-radius:999px; border:1px solid #e5e5e5; padding:6px 12px; background:#fff; cursor:pointer; }
.pill.primary{ background:#10b981; color:#fff; border-color:#10b981; }
.pill.secondary{ background:#e6f7f2; color:#065f46; border-color:#a7f3d0; }
.chat-main{ padding: 12px; }
.messages{ max-width: 820px; margin: 0 auto; height: calc(100vh - 180px); overflow:auto; }
.row{ display:flex; margin: 8px 0; }
.row.you{ justify-content: flex-end; }
.bubble{ background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; max-width: 80%; }
.row.you .bubble{ background:#dcfce7; border-color:#bbf7d0; }
.chat-input{ position: sticky; bottom: 0; background:#fff; padding: 10px; border-top:1px solid #eee; }
.input-wrap{ display:flex; gap:8px; max-width: 820px; margin: 0 auto; }
.input-wrap input{ flex:1; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; }
.send{ background:#10b981; color:#fff; border:none; border-radius:10px; padding:10px 16px; }
.centered{ min-height:100vh; display:grid; place-items:center; background:#0b1220; color:#dbeafe; }
.card{ background:#0f172a; color:#e5e7eb; border:1px solid #1f2937; border-radius:16px; padding:24px; width:min(560px, 92vw); }
.brand{ font-weight:800; color:#a7f3d0; margin-bottom:8px; }
.row{ display:flex; gap:8px; margin:8px 0; }
.row input{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid #374151; background:#111827; color:#e5e7eb; }
.primary{ background:#10b981; color:#fff; border:none; border-radius:10px; padding:10px 16px; cursor:pointer; }
.secondary{ background:#1f2937; color:#e5e7eb; border:1px solid #374151; border-radius:10px; padding:10px 16px; cursor:pointer; }
.sub{ color:#9ca3af; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.small{ font-size:12px; }
.topbar{
  position: sticky; top:0; z-index:1000;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:10px 12px; background:#0b1320; color:#e6fdf5; border-bottom:1px solid #12233a;
}
.topbar .brand{ font-weight:800; letter-spacing:.5px; }
.pill{ background:#0f1b2e; border:1px solid #203b61; padding:6px 10px; border-radius:999px; font-size:.9rem; }
.counter{ font-weight:700; margin-left:4px; }
.btn-sub{ background:#10b981; color:#052016; padding:8px 14px; border-radius:999px; text-decoration:none; font-weight:700; }
body.subscribed .pill { background:#09351c; border-color:#0e7e4d; }