:root {
  --bg: #f6f8fb;
  --panel: #ffffff;
  --ink: #0e1726;
  --muted: #5b6b80;
  --line: #e3e8ef;
  --brand: #0b5fff;
  --brand-ink: #ffffff;
  --ok: #15803d;
  --warn: #b45309;
  --err: #b91c1c;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); }
body.bg { background: var(--bg); min-height: 100vh; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #eef2f7; padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }

.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 22px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink); }
.topbar nav { display: flex; gap: 14px; flex: 1; margin-left: 12px; }
.topbar nav a { color: var(--muted); padding: 4px 6px; border-radius: 6px; }
.topbar nav a:hover { background: #f0f3f8; color: var(--ink); text-decoration: none; }
.logout { color: var(--muted); }

.container { max-width: 980px; margin: 24px auto; padding: 0 22px; }
h1 { margin: 4px 0 18px; font-size: 1.7rem; }
h2 { margin: 0 0 12px; font-size: 1.15rem; }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 18px; margin-bottom: 18px;
}
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.card .num { font-size: 1.7rem; font-weight: 700; }
.card .label { color: var(--ink); font-weight: 600; }
.muted { color: var(--muted); }
.muted.small { font-size: 0.85rem; }
.kv { padding-left: 18px; }
.kv li { margin: 4px 0; }

button, .btn {
  background: var(--brand); color: var(--brand-ink); border: 0;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 600;
}
button:disabled { opacity: 0.6; cursor: progress; }
.btn-danger { background: #fee2e2; color: var(--err); padding: 4px 8px; border-radius: 6px; font-size: 0.85rem; }
.btn-danger:hover { background: #fecaca; }

input[type=text], input[type=password], input[type=file], select {
  border: 1px solid var(--line); padding: 8px 10px; border-radius: 8px;
  font: inherit; min-width: 220px; background: white;
}
label { display: inline-block; margin: 6px 12px 6px 0; color: var(--muted); }
label input, label select { display: block; margin-top: 4px; min-width: 240px; }

.table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.table th, .table td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table.small { font-size: 0.86rem; }

.status { padding: 1px 8px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; }
.status-indexed { background: #dcfce7; color: var(--ok); }
.status-queued, .status-parsing, .status-embedding, .status-indexing, .status-pending { background: #fef3c7; color: var(--warn); }
.status-failed { background: #fee2e2; color: var(--err); }

.snippet { background: #0e1726; color: #d7e0ee; padding: 14px; border-radius: 8px; overflow-x: auto; font-size: 0.86rem; }
.error { background: #fee2e2; color: var(--err); padding: 10px 12px; border-radius: 8px; margin: 10px 0; }

/* Login */
.login-bg { display: grid; place-items: center; min-height: 100vh; background: linear-gradient(135deg, #eef2ff, #f5f7fb); }
.login-card { background: var(--panel); padding: 32px; border-radius: 14px; box-shadow: 0 12px 40px rgba(13,18,30,0.08); width: 360px; }
.login-card .brand-large { font-size: 2.2rem; margin: 0; letter-spacing: -0.02em; }
.login-card label { display: block; margin: 14px 0 4px; color: var(--muted); }
.login-card input { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--line); }
.login-card button { width: 100%; margin-top: 18px; padding: 10px; }
.login-card .hint { color: var(--muted); margin-top: 12px; font-size: 0.86rem; }

/* Chat */
.chat { display: flex; flex-direction: column; height: calc(100vh - 200px); border: 1px solid var(--line); border-radius: 10px; background: white; }
.messages { flex: 1; overflow-y: auto; padding: 16px; }
.msg { display: flex; margin-bottom: 16px; }
.msg-user { justify-content: flex-end; }
.msg-bot { justify-content: flex-start; }
.bubble { max-width: 75%; padding: 10px 14px; border-radius: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.msg-user .bubble { background: var(--brand); color: white; }
.msg-bot .bubble { background: #f1f5fb; color: var(--ink); }
.cites { list-style: none; padding: 0; margin: 6px 0 0; font-size: 0.85rem; color: var(--muted); }
.cites li { display: inline-block; margin-right: 8px; }
.badge { background: #e0e7ff; color: #1e3a8a; padding: 1px 6px; border-radius: 4px; margin-right: 4px; font-weight: 600; }
.cite-mark { color: #1e3a8a; font-size: 0.75em; }

.chat form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); align-items: center; }
.chat input[type=text] { flex: 1; }

.htmx-indicator { display: none; margin-left: 12px; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }

/* Onboarding checklist */
.onboarding-steps { list-style: none; padding: 0; margin: 12px 0; }
.onboarding-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.onboarding-steps li:last-child { border-bottom: none; }
.step-mark { flex: 0 0 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%; background: #e0e7ff; color: #1e3a8a; font-weight: 700; }
.onboarding-steps li.done .step-mark { background: #dcfce7; color: #166534; }
.onboarding-steps li.done a { color: var(--muted); text-decoration: line-through; }

/* Badges (owner console) */
.badge.ok { background: #dcfce7; color: #166534; }
.badge.err { background: #fee2e2; color: #991b1b; }
.btn-small { padding: 4px 10px; font-size: 0.85rem; }