:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body {
  margin: 0;
  background: #0f172a;
  color: #e2e8f0;
}
.container {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
.sub { color: #94a3b8; }
.card {
  background: #111827;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
}
.row { margin-bottom: 12px; }
label { display: block; margin-bottom: 6px; font-weight: 600; }
input, select, button {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #475569;
  padding: 10px;
  box-sizing: border-box;
}
button {
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}
button:hover { background: #1d4ed8; }
#topics { margin: 0; padding-left: 20px; }
#topics li {
  margin: 6px 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
  line-height: 1.5;
}
.topic-details {
  margin-top: 10px;
  border-top: 1px dashed #334155;
  padding-top: 10px;
}
#topicsRaw {
  margin: 8px 0 0;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: #0b1220;
  color: #cbd5e1;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 280px;
  overflow-y: auto;
}
.chat {
  min-height: 220px;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  background: #0b1220;
}
.msg { margin: 8px 0; line-height: 1.45; }
.user { color: #93c5fd; }
.ai { color: #86efac; }
.chat-input {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 8px;
}