/* ===========================================================================
   Portal cảnh báo rug pull - bảng kiểu (CSS thuần, không build step)

   Ràng buộc:
   - CSP `default-src 'self'` và KHÔNG có chỉ thị `font-src` => font ngoài bị
     chặn hoàn toàn. Chỉ dùng font hệ thống, không @import, không CDN.
   - CSP cũng chặn thuộc tính `style=""` nội tuyến, nên mọi thứ ở đây phải là
     class trong file này (xem .hang-nut-nho thay cho style="display:inline").
   - Không JavaScript mới. Không animation lặp: giao diện này là công cụ theo
     dõi tài sản, chuyển động thừa sẽ cạnh tranh với tín hiệu mức nghiêm trọng.

   Bố cục: đoán trước được, một cột nội dung, mật độ cao.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Biến màu - chế độ sáng (mặc định)

   Không dùng #000 hay #fff tuyệt đối. Nền trang hơi lạnh, mặt thẻ sáng hơn
   một bậc để bảng dữ liệu nổi lên mà không cần đổ bóng.
   Tỉ số tương phản đo được ghi trong /tmp/ui/report.md.
   --------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --nen-trang: #f3f5f8;
  --nen-mat: #fbfcfd;
  --nen-chim: #eef1f5;      /* đầu bảng, nút phụ, hàng sọc */
  --nen-noi-bat: #e6ebf2;   /* hover hàng bảng */

  --chu: #16202b;
  --chu-phu: #4f5a68;
  --chu-mo: #5f6b7a;        /* placeholder */

  --vien: #d3d9e0;
  --vien-dam: #7f8a99;      /* viền ô nhập, cần >= 3:1 với nền */

  --nhan: #17518f;          /* xanh dương liên kết và nút chính */
  --nhan-dam: #103b69;
  --nhan-chu-nguoc: #f7fafd;

  /* Mức nghiêm trọng cao: nền đặc đỏ thẫm, chữ gần trắng */
  --cao-nen: #9c1c2b;
  --cao-chu: #fff5f5;
  --cao-vien: #7d1622;

  /* Mức trung bình: viền hổ phách, nền nhạt, KHÔNG đặc - khác hẳn về sắc độ
     nên người mù màu đỏ-lục vẫn tách được hai mức qua độ sáng */
  --vua-nen: #fdf1d8;
  --vua-chu: #6d4400;
  --vua-vien: #b07a10;

  --loi-nen: #fdeceb;
  --loi-chu: #8c1d18;
  --loi-vien: #a3312a;

  --ok-nen: #e6f4ec;
  --ok-chu: #14532d;
  --ok-vien: #1f7a45;

  --canh-bao-nen: #fdf1d8;
  --canh-bao-chu: #6d4400;
  --canh-bao-vien: #b07a10;

  --bo-goc: 6px;
  --khoang: 16px;

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", "Courier New", monospace;
}

/* ---------------------------------------------------------------------------
   2. Biến màu - chế độ tối (theo prefers-color-scheme)
   Nền tối là xám xanh, không phải đen tuyệt đối, để chữ sáng bớt chói.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --nen-trang: #12161b;
    --nen-mat: #191f26;
    --nen-chim: #212932;
    --nen-noi-bat: #262f39;

    --chu: #e4e9ef;
    --chu-phu: #9fabb9;
    --chu-mo: #98a3b1;

    --vien: #2e3742;
    --vien-dam: #6b7684;

    --nhan: #8ec0ff;
    --nhan-dam: #b6d6ff;
    --nhan-chu-nguoc: #0e1620;

    --cao-nen: #7d1622;
    --cao-chu: #ffdfe2;
    --cao-vien: #e0707c;

    --vua-nen: #3a2a0c;
    --vua-chu: #f0c46a;
    --vua-vien: #c9902a;

    --loi-nen: #2b1614;
    --loi-chu: #ffb4ad;
    --loi-vien: #c9564c;

    --ok-nen: #12241a;
    --ok-chu: #7fd8a4;
    --ok-vien: #2f8f5b;

    --canh-bao-nen: #2a2110;
    --canh-bao-chu: #f0c46a;
    --canh-bao-vien: #c9902a;
  }
}

/* ---------------------------------------------------------------------------
   3. Nền tảng
   --------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nen-trang);
  color: var(--chu);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
}

a {
  color: var(--nhan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--nhan-dam); }

/* Vòng focus phải nhìn rõ khi đi bằng bàn phím - dùng chung cho mọi phần tử */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--nhan);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3 {
  margin: 0 0 12px;
  line-height: 1.25;
  font-weight: 650;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }

p { margin: 0 0 10px; }

/* Liên kết nhảy thẳng tới nội dung, chỉ hiện khi được focus bằng bàn phím */
.bo-qua-dieu-huong {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--nen-mat);
  color: var(--chu);
  padding: 10px 14px;
  border: 1px solid var(--vien-dam);
  border-radius: var(--bo-goc);
  z-index: 10;
}
.bo-qua-dieu-huong:focus {
  left: 8px;
  top: 8px;
}

/* ---------------------------------------------------------------------------
   4. Thanh điều hướng - một hàng trên desktop, cao tối đa 72px
   --------------------------------------------------------------------------- */
.thanh-dieu-huong {
  background: var(--nen-mat);
  border-bottom: 1px solid var(--vien);
}

.thanh-dieu-huong-trong {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 56px;
  max-height: 72px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.thuong-hieu {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--chu);
  text-decoration: none;
  white-space: nowrap;
}
.thuong-hieu:hover { color: var(--chu); }

.dieu-huong-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}

.dieu-huong-lien-ket {
  display: block;
  padding: 8px 12px;
  border-radius: var(--bo-goc);
  color: var(--chu-phu);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: background-color 120ms ease, color 120ms ease;
}
.dieu-huong-lien-ket:hover {
  background: var(--nen-chim);
  color: var(--chu);
}

/* Trang hiện tại: đánh dấu bằng BA kênh (chữ đậm, màu chữ đậm hơn, gạch chân
   dày) chứ không riêng màu - vẫn nhận ra được khi in trắng đen */
.dieu-huong-lien-ket.dang-o {
  color: var(--chu);
  font-weight: 650;
  border-bottom-color: var(--nhan);
  border-radius: var(--bo-goc) var(--bo-goc) 0 0;
}

.dieu-huong-cuoi {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dieu-huong-email {
  font-size: 0.8rem;
  color: var(--chu-phu);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   5. Khung nội dung
   --------------------------------------------------------------------------- */
.khung {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 20px 56px;
}

/* Trang đăng nhập / đăng ký: không có thanh điều hướng, cột hẹp căn giữa */
.khung-hep {
  max-width: 460px;
  margin: 0 auto;
  padding: 48px 20px 56px;
}

.khoi {
  background: var(--nen-mat);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  padding: var(--khoang);
  margin-bottom: 18px;
}
.khoi > :last-child { margin-bottom: 0; }

.mo-ta {
  color: var(--chu-phu);
  font-size: 0.9rem;
  max-width: 68ch;
}

/* ---------------------------------------------------------------------------
   6. Thông báo trạng thái - ba class đã có sẵn trong template
   Mỗi loại phân biệt bằng màu + viền trái dày + nhãn chữ trong nội dung,
   không dựa riêng vào màu.
   --------------------------------------------------------------------------- */
.loi,
.thanh-cong,
.canh-bao {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--bo-goc);
  font-size: 0.925rem;
}

.loi {
  background: var(--loi-nen);
  color: var(--loi-chu);
  border-color: var(--loi-vien);
  font-weight: 550;
}
.loi a { color: var(--loi-chu); }

.thanh-cong {
  background: var(--ok-nen);
  color: var(--ok-chu);
  border-color: var(--ok-vien);
}
.thanh-cong a { color: var(--ok-chu); }

/* Băng cảnh báo "chưa liên kết Telegram" nằm ngay dưới thanh điều hướng:
   đây là lý do khách không nhận được alert nên nó phải chắn ngang cả trang */
.canh-bao {
  background: var(--canh-bao-nen);
  color: var(--canh-bao-chu);
  border-color: var(--canh-bao-vien);
}
.canh-bao a {
  color: var(--canh-bao-chu);
  font-weight: 650;
}

.bang-canh-bao {
  max-width: 1120px;
  margin: 16px auto 0;
  padding: 0 20px;
}

/* ---------------------------------------------------------------------------
   7. Bảng dữ liệu - mật độ cao
   --------------------------------------------------------------------------- */
.bang-cuon {
  overflow-x: auto;
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
}

.bang {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.bang th,
.bang td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--vien);
  vertical-align: top;
}

.bang thead th {
  background: var(--nen-chim);
  color: var(--chu-phu);
  font-weight: 650;
  font-size: 0.8rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.bang tbody tr:last-child td { border-bottom: none; }
.bang tbody tr:hover td { background: var(--nen-noi-bat); }

/* Cột thời gian và số: monospace để các chữ số thẳng hàng khi quét dọc */
.o-thoi-gian,
.o-so {
  font-family: var(--font-mono);
  font-size: 0.825rem;
  white-space: nowrap;
  color: var(--chu-phu);
}
.o-so { text-align: right; }

.o-thao-tac {
  white-space: nowrap;
  width: 1%;
}

/* Chuỗi User-Agent rất dài: cắt bớt để không đẩy bảng ra ngoài màn hình,
   bản đầy đủ nằm ở thuộc tính title */
.o-trinh-duyet {
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--chu-phu);
}

/* ---------------------------------------------------------------------------
   8. Dữ liệu hex (địa chỉ ví, hash giao dịch)

   Cắt bớt GIỮA nhưng vẫn copy được đủ: chuỗi được tách làm hai span, phần đầu
   co lại bằng text-overflow còn 6 ký tự cuối luôn hiện. Khi bôi đen và copy,
   trình duyệt lấy nội dung của cả hai span nên vẫn ra chuỗi đầy đủ. Thuộc tính
   title trên phần tử bọc ngoài hiện bản đầy đủ khi rê chuột.
   --------------------------------------------------------------------------- */
.hex {
  font-family: var(--font-mono);
  font-size: 0.825rem;
  display: inline-flex;
  align-items: baseline;
  max-width: 26ch;
  vertical-align: bottom;
}

.hex-dau {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.hex-cuoi {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Tiền tố chain đứng trước địa chỉ, nhạt hơn để địa chỉ vẫn là phần bắt mắt */
.chain {
  font-family: var(--font-mono);
  font-size: 0.775rem;
  color: var(--chu-phu);
  margin-right: 6px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* ---------------------------------------------------------------------------
   9. Mức nghiêm trọng của alert - phần quan trọng nhất

   Hai mức phải phân biệt được KHÔNG CẦN màu. Bốn kênh cùng lúc:
     1. Nhãn chữ tiếng Việt: "Nghiêm trọng" và "Trung bình".
     2. Kiểu tô: mức cao tô ĐẶC (chữ sáng trên nền tối), mức vừa chỉ VIỀN.
     3. Hình dạng: mức cao góc vuông sắc, mức vừa góc bo tròn hẳn.
     4. Độ đậm chữ: 700 so với 550.
   Thêm kênh thứ năm ở cấp hàng bảng: vạch dọc bên trái đậm cho mức cao,
   vạch mảnh cho mức vừa.

   Cặp màu chọn là đỏ thẫm / hổ phách chứ không phải đỏ / lục: hai màu này lệch
   nhau nhiều về ĐỘ SÁNG nên vẫn tách được với người mù màu đỏ-lục.
   --------------------------------------------------------------------------- */
.muc {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.775rem;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid;
}

.muc-cao {
  background: var(--cao-nen);
  color: var(--cao-chu);
  border-color: var(--cao-vien);
  border-radius: 2px;          /* góc vuông = mức cao */
  font-weight: 700;
  letter-spacing: 0.01em;
}

.muc-vua {
  background: var(--vua-nen);
  color: var(--vua-chu);
  border-color: var(--vua-vien);
  border-radius: 999px;        /* góc tròn = mức vừa */
  font-weight: 550;
}

/* Mức không nhận ra được (dữ liệu lạ): hiện nguyên văn, không tô màu nào để
   khỏi ngụ ý sai mức độ */
.muc-khac {
  background: var(--nen-chim);
  color: var(--chu-phu);
  border-color: var(--vien);
  border-radius: var(--bo-goc);
}

.hang-muc-cao td:first-child { border-left: 4px solid var(--cao-vien); }
.hang-muc-vua td:first-child { border-left: 4px solid var(--vua-vien); }

/* ---------------------------------------------------------------------------
   10. Trạng thái gửi

   delivered = 0 nghĩa là alert đã ghi nhận nhưng KHÔNG tới tay khách. Đây là
   thông tin khách cần hiểu ngay, nên nó khác "Đã gửi" ở bốn điểm: nền hàng
   ngả vàng, viền đứt (khác mọi viền liền còn lại của giao diện), chữ đậm, và
   một dòng lý do đi kèm ngay dưới nhãn.
   --------------------------------------------------------------------------- */
.da-gui {
  color: var(--chu-phu);
  font-size: 0.85rem;
}

/* .chip-canh-bao: cùng kiểu, dùng lại cho các trạng thái "thiếu một bước cấu
   hình" khác (vd. khách chưa liên kết Telegram ở trang quản trị) */
.chua-gui-nhan,
.chip-canh-bao {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--canh-bao-vien);
  border-radius: var(--bo-goc);
  background: var(--canh-bao-nen);
  color: var(--canh-bao-chu);
  font-size: 0.775rem;
  font-weight: 650;
  white-space: nowrap;
}

.chua-gui-ly-do {
  display: block;
  margin-top: 4px;
  font-size: 0.775rem;
  color: var(--canh-bao-chu);
}

.hang-chua-gui td { background: var(--canh-bao-nen); }
.hang-chua-gui:hover td { background: var(--canh-bao-nen); }

/* ---------------------------------------------------------------------------
   11. Form - nhãn LUÔN nằm trên ô nhập, không dùng placeholder thay nhãn
   --------------------------------------------------------------------------- */
.form-doc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 460px;
}

/* Hàng ngang cho form nhiều ô ngắn (thêm mục watchlist) */
.form-hang {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.truong {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1 1 180px;
}
.truong-rong { flex: 2 1 320px; }

.nhan {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--chu);
}

.tro-giup {
  font-size: 0.775rem;
  color: var(--chu-phu);
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.925rem;
  color: var(--chu);
  background: var(--nen-mat);
  border: 1px solid var(--vien-dam);
  border-radius: var(--bo-goc);
}

input[name="target_address"],
input[name="invite_code"],
input[name="old_customer_id"],
input[name="new_customer_id"] {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

::placeholder {
  color: var(--chu-mo);
  opacity: 1;
}

input:focus,
select:focus {
  border-color: var(--nhan);
}

/* ---------------------------------------------------------------------------
   12. Nút
   --------------------------------------------------------------------------- */
button {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--bo-goc);
  border: 1px solid var(--vien-dam);
  background: var(--nen-chim);
  color: var(--chu);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease;
}
button:hover { background: var(--nen-noi-bat); }

.nut-chinh {
  background: var(--nhan);
  border-color: var(--nhan);
  color: var(--nhan-chu-nguoc);
}
.nut-chinh:hover {
  background: var(--nhan-dam);
  border-color: var(--nhan-dam);
}

/* Nút phá huỷ dữ liệu (xoá, khoá, thu hồi, đăng xuất mọi thiết bị): viền và
   chữ màu lỗi, KHÔNG tô đặc - tô đặc đỏ nhìn giống nút chính hay bị bấm nhầm */
.nut-nguy-hiem {
  background: var(--nen-mat);
  border-color: var(--loi-vien);
  color: var(--loi-chu);
}
.nut-nguy-hiem:hover { background: var(--loi-nen); }

.nut-nho {
  padding: 4px 10px;
  font-size: 0.8rem;
}

/* Thay cho style="display:inline" bị CSP chặn trên các form nằm trong ô bảng */
.form-trong-hang { display: inline; }

.hang-nut {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   13. Trang tổng quan - ô chỉ số
   --------------------------------------------------------------------------- */
.luoi-chi-so {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.chi-so {
  background: var(--nen-mat);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  padding: var(--khoang);
}

.chi-so-nhan {
  font-size: 0.825rem;
  color: var(--chu-phu);
  margin-bottom: 6px;
}

.chi-so-gia-tri {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--chu);
}

.chi-so-don-vi {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--chu-phu);
}

.chi-so-lien-ket {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
   14. Trạng thái rỗng - không bao giờ để một bảng trống trơn
   --------------------------------------------------------------------------- */
.rong {
  border: 1px dashed var(--vien-dam);
  border-radius: var(--bo-goc);
  padding: 24px 20px;
  text-align: center;
  color: var(--chu-phu);
  background: var(--nen-mat);
}

.rong-tieu-de {
  font-weight: 650;
  color: var(--chu);
  margin-bottom: 6px;
}

.rong p { margin: 0 auto; max-width: 52ch; }

/* ---------------------------------------------------------------------------
   15. Phân trang
   --------------------------------------------------------------------------- */
.phan-trang {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 0.875rem;
}

.phan-trang-vi-tri {
  color: var(--chu-phu);
  font-family: var(--font-mono);
  font-size: 0.825rem;
}

/* ---------------------------------------------------------------------------
   16. Màn hình hẹp
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .thanh-dieu-huong-trong {
    max-height: none;
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 10px;
  }
  .dieu-huong-cuoi { margin-left: 0; }
  .dieu-huong-email { display: none; }
  .khung { padding: 16px 16px 40px; }
  .form-doc { max-width: none; }
  .hex { max-width: 18ch; }
}

/* Người dùng đã bật giảm chuyển động: bỏ nốt các transition hover ít ỏi */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}