:root {
  color-scheme: dark;
  --bg: #070b14;
  --panel: #101827;
  --panel-2: #141f32;
  --line: #26344d;
  --text: #eef4ff;
  --muted: #9eabc0;
  --accent: #6ce5b1;
  --accent-2: #77a7ff;
  --danger: #ff7c8a;
  --warning: #ffd166;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh; margin: 0; color: var(--text); background:
  radial-gradient(circle at 15% 0%, rgba(119,167,255,.12), transparent 30rem),
  radial-gradient(circle at 90% 10%, rgba(108,229,177,.09), transparent 28rem),
  var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
button, input, textarea { font: inherit; }
button {
  border: 0; border-radius: 12px; padding: .8rem 1rem; font-weight: 750;
  color: #06110d; background: var(--accent); cursor: pointer;
}
button:hover { filter: brightness(1.06); }
input, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: .85rem;
  color: var(--text); background: #0b1220; outline: none;
}
input:focus, textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(119,167,255,.12); }
label { display: grid; gap: .45rem; color: var(--muted); font-size: .92rem; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .25rem; font-size: clamp(1.7rem, 4vw, 2.45rem); }
h2 { margin-bottom: 0; font-size: 1.25rem; }
.eyebrow { margin-bottom: .3rem; color: var(--accent); font-size: .72rem; font-weight: 850; letter-spacing: .15em; }
.muted, .secure-note { color: var(--muted); }
.stack { display: grid; gap: 1rem; }
.compact { gap: .7rem; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card {
  width: min(100%, 430px); padding: clamp(1.4rem, 5vw, 2.4rem);
  border: 1px solid var(--line); border-radius: 24px; background: rgba(16,24,39,.92);
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
}
.brand-mark {
  display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 1.4rem;
  border-radius: 18px; color: #06110d; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-size: 1.7rem; font-weight: 900;
}
.alert { margin: 1rem 0; padding: .8rem; border: 1px solid rgba(255,124,138,.35); border-radius: 12px; color: #ffd6da; background: rgba(255,124,138,.09); }
.secure-note { margin: 1rem 0 0; text-align: center; font-size: .78rem; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--line);
  background: rgba(7,11,20,.86); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 1.35rem; }
.button-secondary { color: var(--text); border: 1px solid var(--line); background: var(--panel); }
.page { width: min(1500px, 100%); margin: auto; padding: clamp(1rem, 3vw, 2rem); }
.status-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; margin-bottom: 1rem; }
.status-card {
  display: flex; align-items: center; gap: .75rem; min-height: 82px; padding: 1rem;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
}
.status-card div { display: grid; gap: .2rem; }
.status-card small { color: var(--muted); }
.dot { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 99px; box-shadow: 0 0 16px currentColor; }
.dot.ok { color: var(--accent); background: var(--accent); }
.dot.bad { color: var(--danger); background: var(--danger); }
.dot.pending { color: var(--warning); background: var(--warning); }
.workspace { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0,1fr); gap: 1rem; align-items: start; }
.projects, .chat-panel {
  border: 1px solid var(--line); border-radius: 20px; background: rgba(16,24,39,.94); overflow: hidden;
}
.projects { padding: 1rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.project-list { display: grid; gap: .65rem; margin-top: 1rem; max-height: 450px; overflow: auto; }
.project-item { padding: .8rem; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); }
.project-item p { margin: .35rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.chat-panel { min-height: 650px; display: grid; grid-template-rows: auto 1fr auto; padding: 1rem; }
.badge { padding: .4rem .65rem; border: 1px solid rgba(108,229,177,.25); border-radius: 999px; color: var(--accent); background: rgba(108,229,177,.08); font-size: .75rem; font-weight: 750; }
.messages { min-height: 410px; max-height: 58vh; overflow: auto; display: flex; flex-direction: column; gap: .8rem; padding: .3rem; }
.message { max-width: min(78%, 760px); padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); }
.message.user { align-self: flex-end; border-bottom-right-radius: 4px; background: rgba(119,167,255,.11); }
.message.assistant { align-self: flex-start; border-bottom-left-radius: 4px; }
.message span { display: block; margin-bottom: .3rem; color: var(--accent); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.message p { margin: 0; white-space: pre-wrap; line-height: 1.55; }
.composer { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .7rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.composer textarea { resize: vertical; min-height: 76px; }
@media (max-width: 950px) {
  .status-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .workspace { grid-template-columns: 1fr; }
  .chat-panel { min-height: 600px; }
}
@media (max-width: 560px) {
  .topbar { align-items: flex-start; }
  .status-grid { grid-template-columns: 1fr; }
  .composer { grid-template-columns: 1fr; }
  .message { max-width: 92%; }
}

.status-grid.five { grid-template-columns: repeat(5, minmax(0,1fr)); }
.knowledge-layout { grid-template-columns: minmax(280px, 370px) minmax(0,1fr); }
.side-column { display: grid; gap: 1rem; }
.panel-box { border: 1px solid var(--line); border-radius: 20px; background: rgba(16,24,39,.94); padding: 1rem; }
.library input[type="file"] { padding: .65rem; }
.document-list { display: grid; gap: .65rem; margin-top: 1rem; max-height: 360px; overflow: auto; }
.document-item { display: grid; gap: .28rem; padding: .8rem; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); }
.document-item small { color: var(--muted); }
.empty-note { margin: .5rem 0 0; }
@media (max-width: 1180px) {
  .status-grid.five { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 950px) {
  .knowledge-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .status-grid.five { grid-template-columns: 1fr; }
}