/* Global */
body { font-family: "Inter", sans-serif; }

/* Card base */
.bio-card, .chat-card, .stream-card {
  background: #111;
  border: 1px solid #222;
  border-radius: 20px;
  padding: 25px;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
}

/* Headers */
.bio-header, .chat-header, .stream-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
}
.bio-icon, .chat-icon, .stream-icon {
  width:45px;height:45px;border-radius:12px;display:flex;align-items:center;justify-content:center;
}
.bio-icon { background:#1c1c1c; color:#d944ff; }
.chat-icon { background:#1a1a1a; color:#9b4dff; }
.stream-icon { background:#112414; color:#3bd96b; }

/* Inputs */
.bio-form input, .bio-form select {
  width:100%; background:#000; border:1px solid #333; padding:14px; color:#fff; margin-bottom:12px; box-sizing:border-box;
  border-radius:6px;
}

/* Buttons */
.generate-btn, .action-btn { width:100%; background:#222; border:1px solid #444; padding:12px; border-radius:12px; color:#fff; cursor:pointer; transition:0.2s; }
.generate-btn:hover, .action-btn:hover { background:#fff; color:#000; }

/* Output box */
.bio-output { background:#000; border:1px solid #333; padding:12px; margin-top:12px; border-radius:10px; color:#fff; }

/* Chat */
.context-grid, .stream-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.context-btn, .stream-btn { padding:10px 6px; border-radius:12px; background:#111; border:1px solid #333; text-align:center; cursor:pointer; color:#fff; }
.context-btn.active { background:#fff; color:#000; border-color:#fff; font-weight:600; }
.stream-btn.active { background:#3bd96b; color:#000; border-color:#3bd96b; font-weight:600; }

.small-note { font-size:12px; color:#bdbdbd; margin-top:8px; }