* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
  margin: 0; background: #f4f6f9; color: #1f2937; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px;
  background: #1e3a8a; color: #fff; }
.topbar a { color: #dbeafe; text-decoration: none; }
.topbar .spacer { flex: 1; }
.topbar .link { background: none; border: none; color: #dbeafe; cursor: pointer; }
main { max-width: 960px; margin: 20px auto; padding: 0 16px; }
.card { background: #fff; border-radius: 8px; padding: 18px 20px; margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card.login { max-width: 360px; margin: 80px auto; }
h1, h2 { margin-top: 0; }
label { display: block; margin: 10px 0; }
input, select, textarea { width: 100%; padding: 8px; margin-top: 4px;
  border: 1px solid #d1d5db; border-radius: 6px; }
form.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
form.inline input, form.inline select { width: auto; }
button, .btn { background: #2563eb; color: #fff; border: none; padding: 8px 14px;
  border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { background: #1d4ed8; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #e5e7eb; }
.error { color: #b91c1c; }
.hint { color: #6b7280; font-size: .9em; }
.badge { background: #dc2626; color: #fff; border-radius: 10px; padding: 1px 8px; font-size: .8em; }
.status-done { color: #047857; }
.status-failed { color: #b91c1c; }
.status-processing, .status-pending { color: #b45309; }
.chat { max-height: 280px; overflow-y: auto; margin-bottom: 10px; }
.msg { padding: 6px 10px; margin: 4px 0; border-radius: 6px; background: #f3f4f6; white-space: pre-wrap; }
.msg-system { background: #eff6ff; }
.msg.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.msg.options { background: transparent; padding: 2px 0; }
.opt-btn { margin: 2px 6px 2px 0; padding: 4px 12px; border: 1px solid #93c5fd; background: #eff6ff; color: #1d4ed8; border-radius: 14px; cursor: pointer; font-size: .9em; }
.opt-btn:hover { background: #dbeafe; }
.conn-state { color: #b45309; font-size: .85em; margin: 2px 0; }
.stepper { list-style: none; display: flex; gap: 6px; padding: 0; margin: 10px 0 4px; }
.stepper .step { flex: 1; position: relative; text-align: center; font-size: .85em; color: #9ca3af; padding-top: 16px; }
.stepper .step .dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: #d1d5db; border: 2px solid #d1d5db; }
.stepper .step::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: #e5e7eb; z-index: 0; }
.stepper .step:first-child::before { display: none; }
.stepper .step.active { color: #1d4ed8; font-weight: 600; }
.stepper .step.active .dot { background: #fff; border-color: #1d4ed8; }
.stepper .step.done { color: #047857; }
.stepper .step.done .dot { background: #047857; border-color: #047857; }
.stepper .step.done::before { background: #047857; }
.stepper .step.failed { color: #b91c1c; }
.stepper .step.failed .dot { background: #b91c1c; border-color: #b91c1c; }