:root {
  --bg: #0f172a;
  --bg-soft: #111827;
  --card: #0b1220;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #22c55e;
  --accent-2: #10b981;
  --border: #1f2937;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji','Segoe UI Emoji';
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent); text-decoration: none; }
input, button, select, textarea {
  background: #0b1220; color: var(--text); border: 1px solid var(--border);
  padding: 10px 12px; border-radius: 8px;
}
button { cursor: pointer; }
.container { display: flex; height: 100%; }

/* Sidebar */
.sidebar {
  width: 280px; background: var(--card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.sidebar .brand { padding: 16px; border-bottom: 1px solid var(--border); font-weight: 700; }
.sidebar .section-title { padding: 12px 16px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.sidebar .list { padding: 8px; overflow-y: auto; flex: 1; }
.sidebar .list button, .sidebar .list a {
  width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; margin: 4px 0; border: 1px solid transparent;
  background: transparent; color: var(--text);
}
.sidebar .list button:hover, .sidebar .list a:hover { background: #0f1a31; }
.sidebar .footer { padding: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }

/* Main */
.main { flex: 1; display: flex; flex-direction: column; }
.topbar { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.topbar .spacer { flex: 1; }

.chat {
  flex: 1; overflow-y: auto; padding: 20px; display: flex; justify-content: center;
}
.chat .inner { max-width: 900px; width: 100%; }
.msg { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 10px; }
.msg .avatar { width: 40px; height: 40px; border-radius: 20px; background: #14213d; display:flex; align-items:center; justify-content:center; font-weight:700; }
.msg.user .avatar { background: #1b1f2e; }
.msg.assistant .avatar { background: #163a24; }
.msg .bubble { background: #0b1220; border: 1px solid var(--border); padding: 12px; border-radius: 12px; }
.msg .bubble pre { white-space: pre-wrap; }

.inputbar { padding: 16px; border-top: 1px solid var(--border); }
.inputbar .row { max-width: 900px; margin: 0 auto; display: flex; gap: 10px; }
.inputbar textarea {
  flex: 1; height: 68px; resize: vertical;
}

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid var(--border); padding: 10px; }
.table th { text-align: left; color: var(--muted); font-weight: 600; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }

.form { max-width: 480px; margin: 40px auto; }
.form h1 { margin-top: 0; }
.form .actions { display:flex; gap:12px; align-items:center; }
.badge { display:inline-block; padding:2px 8px; border:1px solid var(--border); border-radius:20px; font-size:12px; color:var(--muted); }

.notice { padding:12px 16px; background:#0f1a31; border:1px solid var(--border); border-radius:8px; color:#cbd5e1; }
.success { background:#0d1f1a; }
.error { background:#2b0f14; }