/* HB Desk — design system console vận hành nội bộ (xem CLAUDE.md gốc: token, 5 quy tắc bắt buộc,
   thư viện class). Ưu tiên đọc nhanh/mật độ thông tin/trạng thái rõ ràng cho ca làm 8 tiếng, không
   hiệu ứng trang trí ngoài những gì liệt kê ở đây. */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  /* Bảng token theo phong cách Tabler (tabler.io/admin-template) — lấy đúng giá trị từ
     @tabler/core (gray scale, primary/success/warning/danger, border-radius, card shadow) map vào
     tên biến hiện có, KHÔNG đổi tên biến hay style của từng selector riêng lẻ, nên toàn bộ 13 trang
     tự động ăn theo mà không phải sửa JS. */
  --ink: #1F2937;
  --paper: #FAFAF9;
  --outer-bg: #F9FAFB;
  --line: #E5E7EB;
  --line-strong: #D1D5DB;
  --accent: #066FD1;
  --accent-soft: #E8F1FB;
  --accent-line: #BCD7F5;
  --accent-text: #0A5CB8;
  /* accent gốc (gold) đủ sáng để tự làm chữ/icon trên cả nền trắng lẫn nền --side-bg tối; accent
     xanh Tabler đậm hơn nên tách riêng 2 biến theo ngữ cảnh nền để không hỏng độ tương phản (đã đo
     bằng công thức WCAG): --accent-fg cho chữ/icon ĐẶT TRÊN nền --accent đặc (nút .btn.pri, badge
     đếm active), --accent-bright cho icon/chữ màu accent ĐẶT TRÊN nền --side-bg tối (sidebar). */
  --accent-fg: #FFFFFF;
  --accent-bright: #4C9AEB;
  --ok: #2FB344;
  --ok-tint: #EAF7EC;
  --warn: #F59F00;
  --warn-tint: #FEF4E0;
  --crit: #D63939;
  --crit-tint: #FBEBEB;
  --dim: #6B7280;
  --faint: #9CA3AF;
  --side-bg: #1F2937;
  --side-fg: #9CA3AF;

  --card-r: 8px;
  --gap: 10px;
  --card-shadow: 0 1px 2px rgba(18, 18, 23, .06), 0 1px 1px rgba(18, 18, 23, .04);

  --f-display: 'Be Vietnam Pro', 'Inter', -apple-system, sans-serif;
  --f-body: 'Inter', -apple-system, "Segoe UI", sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;

  --side-w: 200px;
  --side-w-collapsed: 76px;
}

* { box-sizing: border-box; }

/* <select> mặc định được 1 số trình duyệt (Safari/WebKit) vẽ trên layer riêng bỏ qua z-index của
   trang — khối select đóng có thể đè lên sidebar (.side, z-index:30) dù DOM/stacking context đúng.
   Tắt appearance gốc để select vẽ như box thường (tôn trọng z-index), tự vẽ lại mũi tên bằng CSS. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235A5A5A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* ===== Thanh cuộn — mảnh, bo tròn, track trong suốt, thumb đậm dần khi hover; áp dụng đồng bộ cho
   mọi vùng cuộn trong app (sidebar, danh sách hội thoại, khung chat, bảng cuộn ngang) thay vì thanh
   cuộn mặc định của hệ điều hành nhìn thô, dày. ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: var(--line-strong); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--faint); }
*::-webkit-scrollbar-corner { background: transparent; }

/* KHÔNG đặt height:100% cho body — ép body cố định đúng 1 viewport sẽ phá công thức containing
   block của #nav position:sticky bên dưới (sticky mất khoảng trống để "dính lại", cuộn trôi luôn
   theo trang thay vì đứng yên). body chỉ cần min-height:100vh (khai báo ở rule body bên dưới) để
   tự cao theo nội dung mà vẫn tối thiểu 1 viewport. */
html { height: 100%; }

body {
  font-family: var(--f-body);
  margin: 0;
  background: var(--outer-bg);
  color: var(--ink);
  display: flex;
  min-height: 100vh;
  align-items: stretch;
  container-type: inline-size;
  container-name: shell;
}

/* Sidebar hẹp lại khi khung ngoài (body) hẹp — container query, không phải media query, vì phụ
   thuộc bề rộng khu vực chứa (có thể khác viewport nếu sau này nhúng trong layout khác), và không
   ẩn hẳn display:none vì icon vẫn phải hiện. */
@container shell (max-width: 900px) {
  #nav { --side-w: var(--side-w-collapsed); }
}

/* ===== Sidebar — #nav là "slot" giữ chỗ trong layout, .side là phần thật sự vẽ ra và có thể tự
   bung rộng đè lên nội dung khi hover/focus lúc đang thu gọn (không đẩy lệch layout xung quanh). ===== */
#nav {
  width: var(--side-w);
  flex: none;
  position: relative;
  height: 100vh;
  position: sticky;
  top: 0;
}

.side {
  container-type: inline-size;
  container-name: side;
  position: absolute;
  inset: 0;
  width: var(--side-w);
  background: var(--side-bg);
  color: var(--side-fg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 30;
  transition: width .15s ease, box-shadow .15s ease;
}
.side:hover, .side:focus-within {
  width: 200px;
  box-shadow: var(--card-shadow);
}

/* Nhãn chữ cạnh icon chỉ hiện khi .side đang đủ rộng (>=140px) — cùng 1 ngưỡng cho cả 2 đường thu
   gọn (nút bấm đổi --side-w VÀ container query ở trên đổi --side-w): sửa cơ chế thu gọn thì chỉ
   cần sửa biến --side-w ở 1 trong 2 nơi, ngưỡng ẩn/hiện này tự động theo, không lệch nhau. */
@container side (max-width: 140px) {
  .lbl-wrap .lbl, .side-foot-text { display: none; }
  .nav a { justify-content: center; }
  .wordmark { justify-content: center; padding-left: 8px; padding-right: 8px; }
  .side-toggle svg { transform: rotate(180deg); }
}

.wordmark {
  display: flex;
  align-items: center;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  flex: none;
}
.wordmark img { height: 26px; width: auto; max-width: none; }

.nav { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--side-fg);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav a.active { color: #fff; background: rgba(6,111,209,0.16); }
.nav a .ico { width: 17px; height: 17px; flex: none; opacity: 0.85; }
.nav a.active .ico { opacity: 1; color: var(--accent-bright); }
.lbl-wrap { display: contents; }
.ct { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; background: rgba(255,255,255,0.08); color: var(--side-fg); padding: 1px 6px; border-radius: 999px; }
.nav a.active .ct { background: var(--accent); color: var(--accent-fg); }

.side-foot {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex: none;
}
.side-foot-text .who { font-size: 12px; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot-text .role { font-size: 10.5px; color: var(--side-fg); margin-top: 1px; text-transform: uppercase; letter-spacing: 0.03em; }
.side-foot button {
  margin-top: 9px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: transparent;
  color: var(--side-fg);
  cursor: pointer;
  font-size: 11.5px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .12s ease, color .12s ease;
}
.side-foot button .ico { width: 15px; height: 15px; flex: none; }
.side-foot button:hover { background: rgba(255,255,255,0.08); color: #fff; }

.side-toggle {
  flex: none;
  margin: 6px 10px 2px;
  padding: 7px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--side-fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.side-toggle svg { width: 16px; height: 16px; transition: transform .15s ease; }

/* ===== Content area — mỗi khối chức năng là 1 .block riêng, cách nhau var(--gap), KHÔNG gộp
   thành 1 khối liền có kẻ chia bên trong (quy tắc #1). ===== */
main {
  flex: 1;
  min-width: 0;
  padding: 22px 24px 48px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

main > h1, main > .page-head {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2px 2px 2px;
}
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-sub { font-size: 12.5px; color: var(--dim); margin: -4px 2px 0; }

.block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--card-r);
  box-shadow: var(--card-shadow);
  padding: 18px 20px;
}
.block h2 {
  font-family: var(--f-display);
  font-size: 13.5px;
  font-weight: 700;
  margin: 0 0 12px;
}

/* ===== KPI — số liệu tổng quan; vàng accent CHỈ được phép ở đúng 1 chỉ số quan trọng nhất
   (quy tắc #2), dùng .kpi.hl cho đúng 1 thẻ đó, không lan ra thẻ khác. ===== */
.kpis { display: flex; gap: var(--gap); flex-wrap: wrap; }
.kpi { flex: 1; min-width: 148px; background: #fff; border: 1px solid var(--line); border-radius: var(--card-r); box-shadow: var(--card-shadow); padding: 16px 18px; }
.kpi .n { font-family: var(--f-display); font-size: 26px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.kpi .lbl { font-size: 12px; color: var(--dim); margin-top: 4px; }
.kpi.hl { background: var(--accent-soft); border: 1px solid var(--accent-line); }
.kpi.hl .n { color: var(--accent-text); }

/* ===== Filters / actions ===== */
.filters { display: flex; gap: 8px; margin: 0; flex-wrap: wrap; align-items: center; }
.filters select, .filters input, .filters label { font-size: 13px; }
.filters select, .filters input[type="text"], .filters input[type="date"], .filters input[type="number"], .filters input[type="password"] {
  padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff; color: var(--ink); font-family: var(--f-body);
}
.filters select { padding-right: 26px; }
.filters label { display: flex; align-items: center; gap: 5px; color: var(--dim); }

.btn {
  padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff; color: var(--ink); font-size: 13px; font-weight: 500; font-family: var(--f-body);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--outer-bg); border-color: var(--faint); }
.btn:disabled { opacity: 0.5; cursor: default; }
/* alias — nhiều trang cũ dùng button/a.button trơn, giữ tương thích, style giống hệt .btn. Đặt
   base ở specificity thấp (type selector) để .btn.pri/.primary/.side-toggle (class selector) vẫn
   thắng bình thường mà không cần :not() chồng nhiều lớp (từng làm .pri mất màu vàng vì specificity
   của 4 lớp :not() cao hơn 2 lớp .btn.pri). */
button, a.button {
  padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff; color: var(--ink); font-size: 13px; font-weight: 500; font-family: var(--f-body);
  cursor: pointer; text-decoration: none;
}
button:hover, a.button:hover { background: var(--outer-bg); border-color: var(--faint); }

.btn.pri, button.primary, .row button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 700; }
.btn.pri:hover, button.primary:hover, .row button.primary:hover { background: #055eb2; border-color: #055eb2; }

/* Biến thể nút theo màu ngữ nghĩa sẵn có (ok/warn/crit) — dùng cho hành động không phải "chính"
   của khu vực nhưng vẫn cần nổi bật hơn nút trung tính, KHÔNG đụng tới --accent (quy tắc #2 chỉ
   giới hạn accent, không giới hạn số lần dùng ok/warn/crit — 2 màu này vốn đã lặp lại tự do trên
   nhiều badge cùng 1 trang). */
.btn-ok { border-color: var(--ok); color: var(--ok); font-weight: 600; }
.btn-ok:hover { background: var(--ok-tint); border-color: var(--ok); }
.btn-warn { border-color: var(--warn); color: var(--warn); font-weight: 600; }
.btn-warn:hover { background: var(--warn-tint); border-color: var(--warn); }
.btn-crit { border-color: var(--crit); color: var(--crit); font-weight: 600; }
.btn-crit:hover { background: var(--crit-tint); border-color: var(--crit); }
.btn.sm { padding: 4px 10px; font-size: 12px; }

/* ===== Bảng dữ liệu dạng grid-row — .row.hd (tiêu đề) và .row (dữ liệu) LUÔN cùng số cột khai
   báo qua --cols trên .rows (quy tắc #5); đổi cột thì sửa cả markup lẫn --cols cùng lúc. ===== */
.block.rows { padding: 0; overflow: hidden; }
.rows-scroll { overflow-x: auto; }
.row {
  display: grid;
  grid-template-columns: var(--cols, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
/* Grid item mặc định không co lại dưới min-content, nên 1 giá trị dài không khoảng trắng (vd. tên
   agent/tool) sẽ tràn đè lên cột kế bên thay vì tự xuống dòng — ép min-width:0 + cho phép ngắt
   giữa từ để giữ nguyên toàn bộ nội dung (không cắt bớt bằng ellipsis, dữ liệu kỹ thuật cần đọc đủ). */
.row > * { min-width: 0; overflow-wrap: anywhere; }
.row:last-child { border-bottom: none; }
.row.hd {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--dim);
  background: #fcfcfb;
  padding-top: 11px;
  padding-bottom: 11px;
}
.row.clickable { cursor: pointer; }
.row.clickable:hover { background: var(--accent-soft); }
/* Tiện ích màu/font dùng được ở bất kỳ đâu, không riêng gì bên trong .row — bên trong .row thì
   .c-mono co nhỏ lại (12.5px) cho vừa hàng, ngoài .row giữ nguyên cỡ chữ hiện tại. */
.c-mono { font-family: var(--f-mono); }
.c-dim { color: var(--dim); }
.c-faint { color: var(--faint); font-style: italic; }
.row .c-mono { font-size: 12.5px; }

/* ===== Badge trạng thái/ưu tiên — mono, khẩn cấp/lỗi nghiêm trọng LUÔN dùng --crit (quy tắc #3),
   không dùng đỏ cho trạng thái nào khác. ===== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.badge.p-crit { background: var(--crit-tint); color: var(--crit); }
.badge.p-high { background: var(--warn-tint); color: var(--warn); }
.badge.p-normal { background: var(--outer-bg); color: var(--dim); }
.badge.p-low { background: var(--outer-bg); color: var(--faint); }
/* s-progress dùng nền --line trung tính, KHÔNG dùng vàng accent — quy tắc #2 chỉ cho phép accent
   ở icon nav active / đúng 1 chỉ số quan trọng nhất / nút hành động chính, không lan ra badge. */
.badge.s-pending { background: var(--warn-tint); color: var(--warn); }
.badge.s-progress { background: var(--line); color: var(--ink); }
.badge.s-done { background: var(--ok-tint); color: var(--ok); }
.badge.s-closed { background: var(--outer-bg); color: var(--dim); }
.badge.s-rejected, .badge.s-overdue { background: var(--crit-tint); color: var(--crit); }
/* alias — giữ tương thích class trạng thái cũ (badge.pending_approval, v.v.) */
.badge.pending_approval, .badge.waiting_info { background: var(--warn-tint); color: var(--warn); }
.badge.in_progress { background: var(--line); color: var(--ink); }
.badge.resolved { background: var(--ok-tint); color: var(--ok); }
.badge.closed { background: var(--outer-bg); color: var(--dim); }
.badge.rejected { background: var(--crit-tint); color: var(--crit); }

.aitag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--side-bg); color: var(--accent-bright);
}

.sla { font-family: var(--f-mono); font-size: 11.5px; color: var(--dim); }
.sla.warn { color: var(--warn); font-weight: 600; }
.sla.crit { color: var(--crit); font-weight: 600; }

/* ===== Panel chi tiết bên phải (ticket/hội thoại do agent xử lý) — ahead (đầu đề + badge),
   abody (nội dung/mô tả), draft (bản nháp AI đề xuất), why (lý do AI phân loại/ưu tiên),
   acts (nút hành động — luôn đi qua duyệt, xem 06_GOVERNANCE.md), log (lịch sử/audit). ===== */
.agent { background: #fff; border: 1px solid var(--line); border-radius: var(--card-r); box-shadow: var(--card-shadow); padding: 18px 20px; }
.ahead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.ahead .id { font-family: var(--f-mono); font-size: 12.5px; color: var(--dim); }
.ahead h3 { font-family: var(--f-display); font-size: 14.5px; font-weight: 700; margin: 0; }
/* select trạng thái/ưu tiên trong header chi tiết — mặc định select {} chỉ tắt appearance, không có
   viền/nền/kích thước, nên trông trơ trụi cạnh badge và nút .btn.sm bên cạnh. Bo tròn giống .btn.sm
   để cùng hàng trông đồng bộ. */
.ahead select {
  padding: 4px 26px 4px 10px; border: 1px solid var(--line-strong); border-radius: 8px;
  background-color: #fff; color: var(--ink); font-family: var(--f-body); font-size: 12px; font-weight: 500;
  cursor: pointer;
}
.ahead select:hover { border-color: var(--faint); }
.ahead select:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.abody { font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); margin-bottom: 14px; }
.draft { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 14px; }
.draft .draft-lbl { font-family: var(--f-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-text); margin-bottom: 6px; display: block; }
.why { font-size: 12.5px; color: var(--dim); background: var(--outer-bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; line-height: 1.55; }
.why b { color: var(--ink); }
.acts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.log { font-family: var(--f-mono); font-size: 11.5px; color: var(--dim); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.log b { color: var(--ink); font-weight: 600; }

/* ===== Modal chi tiết — mở khi click 1 dòng trong bảng, thay vì render chèn ngay dưới bảng (cách
   cũ khiến khối .agent + các .block phụ liền kề nhau chỉ cách var(--gap), nhìn dính/rối khi bảng
   đã dài). Nội dung bên trong #detailWrap giữ nguyên các .agent/.block như cũ, chỉ đổi chỗ hiển
   thị sang lớp phủ modal. ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(36, 36, 36, .55);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 48px 20px;
  overflow-y: auto;
  z-index: 200;
}
.modal-overlay[hidden] { display: none; }
.modal-overlay #detailWrap {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.modal-close {
  position: fixed;
  top: 20px;
  right: 28px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 201;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.28); }

.empty { color: var(--faint); font-size: 13px; padding: 28px; text-align: center; }
.block .empty { padding: 24px; }

/* Panel chi tiết chung (dùng ở nhiều trang chưa cần cấu trúc .agent đầy đủ) */
.detail-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--card-r); box-shadow: var(--card-shadow); padding: 18px 20px; white-space: pre-wrap; font-size: 13px; line-height: 1.6; }

section.admin-block, .surface-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--card-r); box-shadow: var(--card-shadow); padding: 18px 20px;
}
section.admin-block h2, .surface-card h2 { font-family: var(--f-display); font-size: 13.5px; margin: 0 0 12px; font-weight: 700; }

/* Compat — bảng cũ dạng <table> (đến khi từng trang chuyển hết sang .row/.row.hd) */
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--card-r); overflow: hidden; box-shadow: var(--card-shadow); }
th, td { text-align: left; padding: 10px 20px; font-size: 13px; border-bottom: 1px solid var(--line); }
th { font-family: var(--f-mono); background: #fcfcfb; color: var(--dim); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #fcfcfb; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--accent-soft); }

.stat-cards { display: flex; gap: var(--gap); flex-wrap: wrap; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--card-r); box-shadow: var(--card-shadow); padding: 16px 18px; min-width: 148px; }
.stat-card .n { font-family: var(--f-display); font-size: 26px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat-card .label { font-size: 12px; color: var(--dim); margin-top: 4px; }

code, .mono, .c-code { font-family: var(--f-mono); }

body.login {
  display: block;
  min-height: 100vh;
  container-type: normal;
}

@media (max-width: 620px) {
  main { padding: 16px; }
  .kpis, .stat-cards { flex-direction: column; }
  .kpi, .stat-card { min-width: 0; }
}