/* ==========================================================================
   Mùa Nước Nổi — Bảng Task · KIỂU CHUNG
   Điện thoại trước. Người duyệt duyệt lúc rảnh, và lúc rảnh thì họ cầm
   điện thoại chứ không ngồi trước màn hình 27 inch.
   ========================================================================== */
:root {
  --nen:        #14100c;
  --nen-2:      #1d1813;
  --nen-3:      #272019;
  --vien:       #3a3129;
  --chu:        #efe6d8;
  --chu-mo:     #a2968a;
  --nuoc:       #3f8f9e;   /* con nước */
  --lua:        #d9a441;   /* lúa chín */
  --dat:        #a8703c;
  --dat-do:     #c2543a;
  --la:         #6f9e52;
  --tim:        #8b6f9e;
  --r: 8px;
  --khoang: 12px;
}
@media (prefers-color-scheme: light) {
  :root {
    --nen: #faf5ec; --nen-2: #fffdf8; --nen-3: #f1e9dc; --vien: #ddd0bc;
    --chu: #241d15; --chu-mo: #6d6155;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--nen); color: var(--chu);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, "Noto Sans", sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--nuoc); }

/* --- Thanh trên ---------------------------------------------------------- */
.thanh {
  position: sticky; top: 0; z-index: 40;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 12px; background: var(--nen-2); border-bottom: 1px solid var(--vien);
}
.thanh h1 { font-size: 16px; margin: 0; font-weight: 700; letter-spacing: .3px; }
.thanh .day { flex: 1; }
.thanh nav a {
  padding: 5px 10px; border-radius: var(--r); text-decoration: none;
  color: var(--chu-mo); font-size: 14px;
}
.thanh nav a.dang { background: var(--nen-3); color: var(--chu); }

/* --- Nút ----------------------------------------------------------------- */
button, .nut {
  font: inherit; cursor: pointer; border: 1px solid var(--vien);
  background: var(--nen-3); color: var(--chu); border-radius: var(--r);
  padding: 7px 12px; line-height: 1.2;
}
button:hover { border-color: var(--nuoc); }
button:disabled { opacity: .45; cursor: not-allowed; }
.nut-dat  { background: #23421f; border-color: var(--la); color: #d8f0c8; }
.nut-bac  { background: #45211c; border-color: var(--dat-do); color: #ffd9d1; }
.nut-chinh{ background: var(--nuoc); border-color: var(--nuoc); color: #06232a; font-weight: 600; }
.nho { font-size: 13px; padding: 4px 8px; }

/* --- Chip / nhãn --------------------------------------------------------- */
.chip {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--vien); font-size: 12px; color: var(--chu-mo);
  background: var(--nen-3); white-space: nowrap;
}
.chip.he    { border-color: var(--tim); color: #d9c6ea; }
.chip.pha   { border-color: var(--nuoc); color: #b6e2ea; }
.chip.loai  { border-color: var(--lua); color: #f0dcae; }
.chip.canh  { border-color: var(--dat-do); color: #ffc9bd; }
.chip.chon  { background: var(--nuoc); color: #06232a; border-color: var(--nuoc); }
.chip[role="button"] { cursor: pointer; }

/* --- Kanban -------------------------------------------------------------- */
.bang { display: flex; gap: 10px; overflow-x: auto; padding: 12px; align-items: flex-start; }
.cot {
  flex: 0 0 260px; background: var(--nen-2); border: 1px solid var(--vien);
  border-radius: var(--r); max-height: calc(100vh - 130px); display: flex; flex-direction: column;
}
.cot > h2 {
  margin: 0; padding: 9px 11px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .6px; border-bottom: 1px solid var(--vien);
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
.cot.nghen > h2 { color: var(--lua); }
.cot .cuon { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.the {
  background: var(--nen-3); border: 1px solid var(--vien); border-radius: 6px;
  padding: 8px 9px; font-size: 13.5px; text-decoration: none; color: inherit; display: block;
}
.the:hover { border-color: var(--nuoc); }
.the b { display: block; font-weight: 600; margin-bottom: 4px; line-height: 1.35; }
.the .meta { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.the.uu1 { border-left: 3px solid var(--dat-do); }
.the.uu2 { border-left: 3px solid var(--lua); }

/* --- Bộ lọc -------------------------------------------------------------- */
.loc { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px; align-items: center;
       background: var(--nen-2); border-bottom: 1px solid var(--vien); }
select, input[type=text], input[type=search], textarea {
  font: inherit; background: var(--nen-3); color: var(--chu);
  border: 1px solid var(--vien); border-radius: var(--r); padding: 6px 8px;
}
textarea { width: 100%; resize: vertical; }

/* ==========================================================================
   CHẾ ĐỘ DUYỆT — phần quan trọng nhất của cả công cụ
   ========================================================================== */
.duyet-goc { display: flex; flex-direction: column; height: 100vh; }

/* Dải mỏ neo ghim trên cùng: mắt phải luôn có cái để so.
   Đây là "Lớp 3 — ảnh mỏ neo" của 04-subagent-fleet.md, chuyển sang cho người. */
.mo-neo {
  display: flex; gap: 6px; padding: 6px 10px; background: var(--nen-3);
  border-bottom: 1px solid var(--vien); overflow-x: auto; align-items: center;
}
.mo-neo .nhan { font-size: 11px; color: var(--chu-mo); text-transform: uppercase; letter-spacing: .5px; }
.mo-neo img {
  height: 56px; width: auto; image-rendering: pixelated; border-radius: 4px;
  border: 1px solid var(--vien); background: #0008;
}

/* Contact sheet */
.tam {
  flex: 1; overflow-y: auto; padding: 10px;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  align-content: start;
}
.o {
  position: relative; background: var(--nen-2); border: 2px solid var(--vien);
  border-radius: 6px; padding: 4px; cursor: pointer; overflow: hidden;
}
.o img {
  width: 100%; height: 104px; object-fit: contain; image-rendering: pixelated;
  display: block; background: repeating-conic-gradient(#0000 0 25%, #ffffff0a 0 50%) 50%/12px 12px;
}
.o .ten { font-size: 10.5px; color: var(--chu-mo); margin-top: 3px; white-space: nowrap;
          overflow: hidden; text-overflow: ellipsis; }
.o.dang  { border-color: var(--nuoc); box-shadow: 0 0 0 2px var(--nuoc) inset; }
.o.dat   { border-color: var(--la); }
.o.tra-ve{ border-color: var(--dat-do); }
.o.bo-qua{ opacity: .45; }
.o .dau {
  position: absolute; top: 3px; right: 4px; font-size: 15px; font-weight: 700;
  text-shadow: 0 0 4px #000; pointer-events: none;
}
.o.dat .dau { color: var(--la); }
.o.tra-ve .dau { color: var(--dat-do); }

/* Soi — xem một ảnh to, cạnh mỏ neo */
.soi { flex: 1; display: none; overflow: hidden; }
.soi.hien { display: flex; }
.soi .khung {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(#0000 0 25%, #ffffff08 0 50%) 50%/24px 24px;
  min-width: 0; padding: 8px;
}
.soi .khung img { max-width: 100%; max-height: calc(100vh - 230px); image-rendering: pixelated; }
.soi .canh {
  flex: 0 0 30%; display: none; flex-direction: column; gap: 6px; padding: 8px;
  border-left: 1px solid var(--vien); overflow-y: auto; background: var(--nen-2);
}
.soi.so-neo .canh { display: flex; }
.soi .canh img { width: 100%; image-rendering: pixelated; border: 1px solid var(--vien); border-radius: 4px; }

/* Thanh dưới — ngón tay cái với tới được trên điện thoại */
.day-duoi {
  border-top: 1px solid var(--vien); background: var(--nen-2);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 7px;
}
.day-duoi .hang { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.day-duoi .hang.to button { flex: 1; padding: 13px 10px; font-size: 15px; font-weight: 600; }
.ly-do-chip { display: flex; gap: 5px; flex-wrap: wrap; }
.tien-do { font-size: 12.5px; color: var(--chu-mo); }
.cho-gui { color: var(--lua); }

/* Bảng phím tắt */
.phim { position: fixed; inset: 0; background: #000c; display: none; z-index: 90;
        align-items: center; justify-content: center; padding: 16px; }
.phim.hien { display: flex; }
.phim .hop { background: var(--nen-2); border: 1px solid var(--vien); border-radius: var(--r);
             padding: 16px 20px; max-width: 460px; width: 100%; }
.phim table { width: 100%; border-collapse: collapse; font-size: 14px; }
.phim td { padding: 4px 6px; border-bottom: 1px solid var(--vien); }
.phim kbd {
  background: var(--nen-3); border: 1px solid var(--vien); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 6px; font-family: ui-monospace, Consolas, monospace; font-size: 13px;
}

/* --- Trang chi tiết / thống kê ------------------------------------------- */
.trang { max-width: 1000px; margin: 0 auto; padding: 14px; }
.hop { background: var(--nen-2); border: 1px solid var(--vien); border-radius: var(--r);
       padding: 12px 14px; margin-bottom: 12px; }
.hop h2 { margin: 0 0 8px; font-size: 15px; }
table.ds { width: 100%; border-collapse: collapse; font-size: 14px; }
table.ds th, table.ds td { text-align: left; padding: 5px 7px; border-bottom: 1px solid var(--vien); }
table.ds th { color: var(--chu-mo); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; }
pre { background: var(--nen-3); border: 1px solid var(--vien); border-radius: 6px;
      padding: 9px; overflow-x: auto; font-size: 12.5px; }
.thanh-do { height: 9px; background: var(--nen-3); border-radius: 999px; overflow: hidden; display: flex; }
.thanh-do i { display: block; height: 100%; }
.canh-bao { border-left: 3px solid var(--lua); padding: 8px 11px; background: var(--nen-3);
            border-radius: 5px; margin-bottom: 8px; font-size: 14px; }
.canh-bao.cao { border-left-color: var(--dat-do); }
.mo { color: var(--chu-mo); }
.so-to { font-size: 26px; font-weight: 700; line-height: 1.1; }
.o-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }

/* --- Điện thoại ---------------------------------------------------------- */
@media (max-width: 640px) {
  .tam { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; padding: 6px; }
  .o img { height: 78px; }
  .cot { flex: 0 0 84vw; max-height: none; }
  .soi .canh { flex: 0 0 34%; }
  .soi .khung img { max-height: calc(100vh - 290px); }
  .thanh h1 { font-size: 14px; }
  .an-dt { display: none !important; }
}
@media (min-width: 641px) { .chi-dt { display: none !important; } }

.toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: var(--nen-3); border: 1px solid var(--nuoc); color: var(--chu);
  padding: 8px 14px; border-radius: var(--r); z-index: 100; font-size: 14px;
  max-width: 90vw; box-shadow: 0 6px 20px #0006;
}