* { box-sizing: border-box; }
body {
  margin: 0; background: #0b0b0f; color: #e7e7ee;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
nav {
  display: flex; align-items: center; gap: 4px;
  padding: 12px 20px; border-bottom: 1px solid #232330; background: #14141b;
}
nav .brand { font-weight: 600; margin-right: 20px; }
nav a {
  color: #9a9aad; text-decoration: none; padding: 8px 14px;
  border-radius: 8px; font-size: 14px;
}
nav a:hover { background: #1e1e28; }
nav a.on { background: rgba(109,94,252,.2); color: #fff; }
nav a.out { margin-left: auto; color: #6a6a7a; }
.wrap { max-width: 820px; margin: 0 auto; padding: 24px 20px; }
.card {
  background: #14141b; border: 1px solid #232330;
  border-radius: 14px; padding: 16px; margin-bottom: 12px;
}
input, textarea, button {
  font: inherit; border-radius: 10px; border: 1px solid #232330;
}
input, textarea {
  width: 100%; background: #0b0b0f; color: #e7e7ee;
  padding: 10px 12px; margin: 6px 0;
}
button {
  background: #6d5efc; color: #fff; border: none;
  padding: 10px 16px; cursor: pointer; font-weight: 500;
}
button:disabled { opacity: .5; cursor: default; }
button.ghost { background: #1e1e28; border: 1px solid #232330; }
.muted { color: #6a6a7a; font-size: 13px; }
.tag { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: #0b0b0f; }
/* Chat */
.msgs { min-height: 50vh; display: flex; flex-direction: column; gap: 10px; }
.bubble {
  max-width: 75%; padding: 10px 14px; border-radius: 16px;
  white-space: pre-wrap; line-height: 1.4;
}
.bubble.user { align-self: flex-end; background: rgba(109,94,252,.2); }
.bubble.bot { align-self: flex-start; background: #14141b; border: 1px solid #232330; }
.progress { color: #8a8a9a; font-size: 13px; }
.composer { display: flex; gap: 8px; margin-top: 14px; }
.composer input { margin: 0; }
.center { min-height: 100vh; display: grid; place-items: center; }
.login-box { width: 320px; }
h1 { font-size: 20px; }