:root {
  --bg: #faf7f2;
  --card: #ffffff;
  --fg: #1e1e1e;
  --muted: #6b6b6b;
  --accent: #c46a1f;
  --accent-hover: #a95612;
  --border: #e6e0d6;
  --chip: #f1ece2;
  --code-bg: #f4efe5;
  --max: 720px;
  --unit: 12px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif;
}
main#app { max-width: var(--max); margin: 0 auto; padding: 48px 24px 72px; }

.brand { text-align: center; margin-bottom: 36px; }
.brand h1 { font-size: 48px; line-height: 60px; margin: 0 0 12px; letter-spacing: -0.5px; color: var(--accent); }
.tagline { color: var(--muted); margin: 0; font-size: 14px; line-height: 24px; }

.search { display: flex; gap: 12px; align-items: stretch; }
.search textarea {
  flex: 1; resize: none; padding: 12px 24px; font: inherit; color: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,106,31,.15); }
.search button {
  padding: 0 24px; font: inherit; font-weight: 600; color: #fff; background: var(--accent);
  border: none; border-radius: 12px; cursor: pointer; transition: background .15s;
}
.search button:hover:not(:disabled) { background: var(--accent-hover); }
.search button:disabled { opacity: .6; cursor: not-allowed; }

.result { margin-top: 36px; display: flex; flex-direction: column; gap: 24px; }
.result.hidden, .actions.hidden { display: none; }

.answer {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 24px; min-height: 48px; font-size: 16px; line-height: 1.75;
  word-wrap: break-word; overflow-wrap: break-word;
  white-space: pre-wrap;
}

.answer .cursor {
  display: inline-block; width: 6px; height: 18px; background: var(--accent);
  vertical-align: -3px; animation: blink 1s steps(2) infinite; margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

.sources { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 24px; }
.sources summary { cursor: pointer; color: var(--muted); font-size: 14px; line-height: 24px; user-select: none; }
.sources[open] summary { margin-bottom: 12px; }
.sources ol { margin: 0; padding-left: 24px; }
.sources li { font-size: 14px; line-height: 24px; }
.sources li + li { margin-top: 12px; }
.sources .meta { color: var(--muted); font-size: 12px; line-height: 24px; }
.sources .snippet { color: #3a3a3a; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.actions button {
  padding: 12px 24px; font: inherit; font-weight: 600; line-height: 24px;
  border-radius: 12px; cursor: pointer; background: var(--accent); color: #fff; border: none;
}
.actions button.secondary { background: var(--chip); color: var(--fg); }
.actions button:hover { filter: brightness(0.96); }

.foot { text-align: center; color: var(--muted); font-size: 12px; line-height: 24px; margin-top: 72px; }
.err { color: #b33a3a; margin-top: 12px; }

@media (max-width: 500px) {
  main#app { padding: 24px 12px 48px; }
  .brand { margin-bottom: 24px; }
  .brand h1 { font-size: 36px; line-height: 48px; }
  .search { flex-direction: column; }
  .search button { padding: 12px 24px; }
  .answer { padding: 12px; }
  .sources { padding: 12px; }
}