:root {
  --bg: #f3f6f9; --card: #ffffff; --text: #1f2a37; --muted: #5d6b7b;
  --line: #d8e1ea; --accent: #0f766e; --accent-2: #0284c7;
  --danger: #b42318; --danger-bg: #fef3f2; --ok-bg: #ecfdf3; --ok-text: #067647;
  --sidebar-w: 240px;
}
* { box-sizing: border-box; }
body { margin:0; font-family:"Segoe UI","Trebuchet MS",sans-serif; color:var(--text); background:var(--bg); }

/* --- Login overlay --- */
#loginOverlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.45); display:flex;
  align-items:center; justify-content:center; z-index:999;
}
#loginBox {
  background:#fff; border-radius:18px; padding:32px; width:360px;
  box-shadow:0 12px 40px rgba(0,0,0,0.15);
}
#loginBox h2 { margin:0 0 20px; font-size:22px; }
#loginBox input { width:100%; margin-bottom:12px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:14px; }
#loginBox .err { color:var(--danger); font-size:13px; margin-bottom:8px; display:none; }

/* --- Layout --- */
.layout { display:flex; min-height:100vh; }
.sidebar {
  width:var(--sidebar-w); background:#fff; border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0;
  z-index:10;
}
.sidebar-brand {
  padding:20px 18px 12px; font-size:20px; font-weight:700; letter-spacing:0.2px;
  border-bottom:1px solid var(--line);
}
.sidebar-brand small { display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:2px; }
.sidebar-nav { flex:1; padding:12px 0; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:10px 18px; cursor:pointer;
  font-size:14px; color:var(--muted); transition:all .12s;
  border-left:3px solid transparent;
}
.nav-item:hover { background:#f8fbfd; color:var(--text); }
.nav-item.active { background:#ecfdf3; color:var(--accent); border-left-color:var(--accent); font-weight:600; }
.nav-icon { font-size:18px; width:22px; text-align:center; }
.sidebar-footer { padding:14px 18px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.sidebar-footer .admin-name { font-weight:600; color:var(--text); }

.main { margin-left:var(--sidebar-w); flex:1; padding:28px 32px 48px; }

.page { display:none; }
.page.active { display:block; }

/* --- Cards --- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:0 8px 20px rgba(16,24,40,0.04); }
.k { color:var(--muted); font-size:13px; margin-bottom:6px; }
.v { font-size:24px; font-weight:700; }

/* --- Panel --- */
.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:0 8px 20px rgba(16,24,40,0.04); }
.panel + .panel { margin-top:16px; }
.panel h2 { margin:2px 0 14px; font-size:20px; }

/* --- Table --- */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:800px; }
th, td { border-bottom:1px solid var(--line); padding:10px 8px; text-align:left; vertical-align:middle; font-size:14px; }
th { color:var(--muted); font-weight:600; background:#f8fbfd; position:sticky; top:0; }
tr:hover td { background:#fbfdff; }

/* --- Common --- */
.mono { font-family:Consolas,"Courier New",monospace; font-size:12px; }
.chip { border-radius:999px; padding:3px 10px; font-size:12px; font-weight:600; display:inline-block; }
.chip-on { background:var(--ok-bg); color:var(--ok-text); }
.chip-off { background:#f2f4f7; color:#475467; }
.actions-cell { white-space:nowrap; }
.toolbar { display:flex; gap:10px; align-items:center; margin:14px 0; }
.search {
  width:360px; max-width:100%; border:1px solid var(--line); border-radius:10px;
  background:#fff; padding:10px 12px; font-size:14px;
}
.btn {
  border:1px solid var(--line); background:#fff; color:var(--text); border-radius:9px;
  padding:8px 12px; font-size:13px; cursor:pointer; transition:all .12s;
}
.btn:hover { transform:translateY(-1px); border-color:#b6c5d5; }
.btn-primary { background:linear-gradient(135deg,var(--accent),#0d9488); color:#fff; border-color:transparent; }
.btn-danger { background:var(--danger-bg); color:var(--danger); border-color:#fecaca; }
.btn-small { padding:6px 10px; font-size:12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px 14px; }
.field label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.field input, .field select { width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 11px; font-size:14px; }
.section-title { margin:18px 0 10px; font-size:15px; font-weight:700; color:#344054; }
.form-actions { margin-top:14px; }
.page-title { margin:0 0 18px; font-size:24px; }

/* --- Chat --- */
.chat-msg { max-width:72%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.5; word-break:break-word; white-space:pre-wrap; }
.chat-user { align-self:flex-end; background:linear-gradient(135deg,#0f766e,#0d9488); color:#fff; border-bottom-right-radius:4px; }
.chat-bot { align-self:flex-start; background:#fff; border:1px solid #d8e1ea; color:#1f2a37; border-bottom-left-radius:4px; }
.chat-system { align-self:center; background:#e8f4fd; color:#0369a1; border-radius:10px; font-size:13px; max-width:90%; text-align:center; }
.chat-error { align-self:center; background:#fef3f2; color:#b42318; border-radius:10px; font-size:13px; max-width:90%; text-align:center; }
.chat-sources { align-self:flex-start; font-size:12px; color:#5d6b7b; padding:4px 14px; max-width:72%; }
.chat-typing { align-self:flex-start; color:#5d6b7b; font-size:13px; font-style:italic; }