:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #0b1220; color: #e5e7eb; min-height: 100vh; }
button, input, select { font: inherit; }
button { border: 0; border-radius: 10px; padding: .7rem 1rem; cursor: pointer; background: #2563eb; color: white; }
button:disabled { cursor: not-allowed; opacity: .55; }
button.secondary { background: #253247; }
button.danger { background: #7f1d1d; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-card { width: min(390px, 100%); background: #111827; border: 1px solid #253247; border-radius: 18px; padding: 26px; display: grid; gap: 14px; box-shadow: 0 18px 60px rgba(0,0,0,.25); }
.auth-card h1, .auth-card p { margin: 0; }
.auth-card p, .auth-card small { color: #94a3b8; }
.auth-card label { display: grid; gap: 6px; font-size: .92rem; }
.auth-card input, .composer input, #mock-form input, #mock-form select, .onboarding-form input { min-width: 0; border: 1px solid #334155; border-radius: 10px; padding: 11px; background: #0f172a; color: #e5e7eb; }
.brand-mark { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #1d4ed8; font-weight: 800; font-size: 1.3rem; }
.error { color: #fca5a5 !important; background: #451a1a; border-radius: 8px; padding: 9px; }
.shell { max-width: 1100px; margin: auto; padding: 20px; }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
header h1 { margin-bottom: 0; } header p { margin-top: 5px; color:#94a3b8; }
.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.user-chip { background: #172033; border-radius: 999px; padding: 8px 12px; color: #cbd5e1; }
.status { display:flex; gap:8px; margin:16px 0; flex-wrap:wrap; }
.pill { background:#172033; padding:8px 12px; border-radius:999px; }
.settings-panel { margin-bottom: 16px; padding: 18px; border: 1px solid #253247; border-radius: 16px; background: #111827; }
.section-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.section-heading h2, .section-heading p { margin: 0 0 6px; } .section-heading p { color: #94a3b8; }
.connector-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.connector-card { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#172033; padding:14px; border-radius:12px; }
.connector-card strong, .connector-card small { display:block; }.connector-card small { color:#94a3b8; margin-top:4px; }
.connector-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.onboarding-panel { margin-top: 14px; padding: 18px; border: 1px solid #334155; border-radius: 14px; background: #0f172a; }
.onboarding-heading { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.onboarding-heading h3, .onboarding-heading p { margin: 0 0 6px; }
.onboarding-heading p { color: #94a3b8; }
.auth-qr { display: block; width: min(280px, 90%); height: auto; margin: 18px auto; padding: 8px; background: white; border-radius: 16px; }
.onboarding-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: end; margin-top: 14px; }
.onboarding-form label { grid-column: 1 / -1; color: #cbd5e1; font-size: .92rem; }
.layout { display:grid; grid-template-columns: 320px 1fr; min-height: 540px; border:1px solid #253247; border-radius:16px; overflow:hidden; background:#111827; }
aside { border-right:1px solid #253247; padding:16px; }
.chat { padding:16px; display:flex; flex-direction:column; min-width:0; }
.list { display:flex; flex-direction:column; gap:6px; }
.conversation { width:100%; text-align:left; background:#172033; }
.conversation strong, .conversation small { display:block; }
.conversation small { color:#94a3b8; margin-top:4px; }
.messages { flex:1; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:12px 0; }
.message { max-width:78%; padding:10px 12px; border-radius:14px; background:#253247; }
.message.outgoing { align-self:flex-end; background:#1d4ed8; }
.message small { display:block; opacity:.7; margin-top:5px; }
.composer, #mock-form { display:flex; gap:8px; }
.composer input, #mock-form input, #mock-form select { flex:1; }
.devbox { margin-top:16px; padding:14px; border:1px dashed #334155; border-radius:12px; }
.devbox summary { cursor:pointer; margin-bottom:12px; }
.empty { color:#94a3b8; }
@media (max-width: 760px) {
  .shell{padding:10px}.layout{grid-template-columns:1fr}.layout aside{border-right:0;border-bottom:1px solid #253247;max-height:230px;overflow:auto}.chat{min-height:420px}
  #mock-form{flex-direction:column}.connector-grid{grid-template-columns:1fr}.section-heading,.onboarding-heading{flex-direction:column}.header-actions{justify-content:flex-start}.user-chip{order:-1;width:100%}
  .connector-card{align-items:flex-start;flex-direction:column}.connector-actions{width:100%;justify-content:flex-start}.onboarding-form{grid-template-columns:1fr}.onboarding-form label{grid-column:auto}
}