/* The collection book (js/content.js tab 'collect'), LORDNINE's บันทึก page. 2026-10-18 rework (the user: "เช็คคอลเลกชันใหม่หน่อย
   ตรวจสอบอย่างละเอียด และทำให้ดูง่าย ใช้ง่าย"): every colour comes from the book skin through --cl-* (the light skins too),
   one row of filters + search, the ตีบวก tab's +N / kind chips, "ลงทะเบียนทั้งหมด" with its count on a bar pinned to the
   foot of the page, a short open-row page (.cld: one line a slot, the slot's sources as a small list of tappable rows),
   the right page as cards. (The enhanced records' part 2 styles, css/enhcoll.css until today, are here too.) */
#ui .bookwin .clo {
  --cl-ink: #f2ead6; --cl-ink2: #b9ad94; --cl-dim: #8f846e; --cl-acc: #ffcf6a; --cl-good: #7fe07a; --cl-goodbg: rgba(60, 130, 60, 0.22);
  --cl-panel: rgba(0, 0, 0, 0.32); --cl-panel2: rgba(255, 255, 255, 0.05); --cl-line: rgba(255, 214, 120, 0.25); --cl-warn: #ff9f80;
  --cl-page: var(--bk-page, #222120); --cl-shade: rgba(0, 0, 0, 0.7);
}
:root[data-booklight] #ui .bookwin .clo {
  --cl-ink: var(--bk-ink); --cl-ink2: var(--bk-ink2); --cl-dim: color-mix(in srgb, var(--bk-ink2) 80%, transparent); --cl-acc: var(--bk-acc);
  --cl-good: #217611; --cl-goodbg: rgba(70, 160, 60, 0.15); --cl-panel: color-mix(in srgb, var(--bk-acc) 9%, transparent);
  --cl-panel2: color-mix(in srgb, var(--bk-acc) 6%, transparent); --cl-line: color-mix(in srgb, var(--bk-acc) 30%, transparent); --cl-warn: #b4401f;
  --cl-shade: color-mix(in srgb, var(--bk-acc) 22%, transparent);
}

/* ---------- the left page: a column as tall as the page, so the register-all bar sits at its foot ---------- */
#ui .bookwin .clo-main { display: flex; flex-direction: column; min-height: 100%; }
#ui .bookwin .clo .clo-head { gap: 6px; }
#ui .bookwin .clo .clo-tabs { border-bottom-color: var(--cl-line); }
#ui .bookwin .clo .clo-tab { color: var(--cl-ink2); }
#ui .bookwin .clo .clo-tab.on { color: var(--cl-acc); border-bottom-color: var(--cl-acc); }
#ui .bookwin .clo-tools { display: flex; align-items: center; gap: 4px; }
#ui .bookwin .clo-tools .eco-chip { flex: 0 0 auto; padding: 3px 9px; font-size: 0.8rem; white-space: nowrap; }
#ui .bookwin .clo-tools .cl-q { flex: 1 1 auto; min-width: 0; padding: 4px 10px; font-size: 0.8rem; }
#ui .bookwin .clo-bands { display: flex; flex-wrap: nowrap; gap: 3px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--cl-acc) 50%, transparent) transparent; padding-bottom: 1px; }
#ui .bookwin .clo-bands .eco-chip { flex: 0 0 auto; padding: 2px 7px; font-size: 0.74rem; white-space: nowrap; }
#ui .bookwin .clo-bands .eco-chip small { margin-left: 3px; font: 600 0.68rem var(--thai); opacity: 0.8; }
#ui .bookwin .clo .clo-list { gap: 5px; padding-bottom: 6px; }
#ui .bookwin .clo-empty { padding: 18px 8px; text-align: center; font: 600 0.88rem var(--thai); color: var(--cl-ink2); }

/* a set's row */
#ui .bookwin .clo .clo-row { background: var(--cl-panel); border-color: color-mix(in srgb, var(--cl-line) 60%, transparent); }
#ui .bookwin .clo .clo-row.can { border-color: var(--cl-good); background: var(--cl-goodbg); }
#ui .bookwin .clo .clo-row.open { border-color: var(--cl-acc); opacity: 1; }
#ui .bookwin .clo .clo-name b { color: var(--cl-ink); }
#ui .bookwin .clo .clo-name small { color: var(--cl-ink2); }
#ui .bookwin .clo .clo-detail { border-top-color: var(--cl-line); }
:root[data-booklight] #ui .bookwin .clo .clo-pt { color: color-mix(in srgb, var(--pc) 40%, var(--bk-ink)); }
/* every slot icon is a button (the ones you cannot fill open the row on that slot's sources) */
#ui .bookwin .clo-icons button.clx-ic { cursor: pointer; font: inherit; color: inherit; }
#ui .bookwin .clo-icons button.clx-ic:not(.can):not(.in):hover { border-color: var(--cl-acc); }
#ui .bookwin .clo-icons button.clx-ic:focus-visible, #ui .bookwin .cld-pic:focus-visible { outline: 2px solid #ffd36a; outline-offset: 1px; }
#ui .bookwin .clx-ic .clo-ln, #ui .bookwin .cld-pic .clo-ln { position: absolute; left: 1px; top: 1px; padding: 1px 3px; border-radius: 4px; font: 800 8px/1 Fredoka, sans-serif; font-style: normal;
  color: #fff; background: #b8322a; box-shadow: 0 0 0 1px #14100c; }
#ui .bookwin .clo-icons .clx-ic .clo-set { color: #ffe08a; text-shadow: 1px 1px 0 #000; }
:root[data-booklight] #ui .bookwin .clo-icons .clx-ic .clo-set { color: var(--bk-acc); text-shadow: 1px 1px 0 #fff; }
/* a row of four or more pieces: smaller slots, and its name may take two lines (LORDNINE shows the whole name) */
#ui .bookwin .clo-row.many .clo-icons { gap: 3px; }
#ui .bookwin .clo-row.many .clo-icons .clx-ic { width: 33px; height: 33px; }
#ui .bookwin .clo-row.many .clo-icons .clx-ic img { width: 26px; height: 26px; }
#ui .bookwin .clo-row.many .clo-name b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }

/* ---------- an open row: the bonus, one line a slot, its sources under it ---------- */
#ui .bookwin .cld { display: flex; flex-direction: column; gap: 4px; }
#ui .bookwin .cld-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0 2px 6px; border-bottom: 1px dashed var(--cl-line); }
#ui .bookwin .cld-bonus { flex: 1 1 200px; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; }
#ui .bookwin .cld-bonus em { margin-right: 2px; font: 600 0.74rem var(--thai); font-style: normal; color: var(--cl-ink2); }
#ui .bookwin .cld-bonus i { padding: 1px 7px; border-radius: 8px; font: 700 0.76rem/1.5 var(--thai); font-style: normal; color: var(--cl-good); background: var(--cl-goodbg); }
#ui .bookwin .cld-prog { font: 700 0.8rem var(--thai); color: var(--cl-ink2); white-space: nowrap; }
#ui .bookwin .cld-prog.done { color: var(--cl-good); }
#ui .bookwin .cld-slot { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; background: var(--cl-panel2); }
#ui .bookwin .cld-slot.can { box-shadow: inset 3px 0 0 var(--cl-good); }
#ui .bookwin .cld-slot.in { opacity: 0.66; }
#ui .bookwin .cld-slot.open { background: color-mix(in srgb, var(--cl-acc) 12%, transparent); }
#ui .bookwin .cld-pic { position: relative; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 7px; cursor: pointer;
  background: rgba(0, 0, 0, 0.45); border: 2px solid color-mix(in srgb, var(--gc, #c9c2b0) 60%, #14100c); }
#ui .bookwin .cld-pic.g0 { --gc: #c9c2b0; } #ui .bookwin .cld-pic.g1 { --gc: #7fe07a; } #ui .bookwin .cld-pic.g2 { --gc: #5fb4ff; }
#ui .bookwin .cld-pic.g3 { --gc: #c27bff; } #ui .bookwin .cld-pic.g4 { --gc: #ffb340; } #ui .bookwin .cld-pic.g5 { --gc: #ff5a6a; } #ui .bookwin .cld-pic.mat { --gc: #d9a443; }
#ui .bookwin .cld-pic img { width: 32px; height: 32px; object-fit: contain; }
#ui .bookwin .cld-pic b { position: absolute; right: 2px; bottom: 0; font: 800 10px/1 Fredoka, sans-serif; color: #ffe08a; text-shadow: 1px 1px 0 #000; }
#ui .bookwin .cld-txt { display: flex; flex-direction: column; min-width: 0; }
#ui .bookwin .cld-txt > b { font: 700 0.88rem/1.25 var(--thai); color: var(--cl-ink); }
#ui .bookwin .cld-txt > b[style]::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; background: var(--gc, transparent); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
#ui .bookwin .cld-txt small { font: 500 0.72rem/1.35 var(--thai); color: var(--cl-ink2); }
#ui .bookwin .cld-have { font-weight: 600 !important; }
#ui .bookwin .cld-have.ok { color: var(--cl-good) !important; font-weight: 700 !important; }
#ui .bookwin .cld-have.in { color: var(--cl-good) !important; }
#ui .bookwin .cld-where { padding: 0 2px; border: 0; background: none; font: 700 0.72rem var(--thai); color: var(--cl-acc); cursor: pointer; }
#ui .bookwin .cld-where:hover { text-decoration: underline; }
#ui .bookwin .cld-act { display: flex; align-items: center; }
#ui .bookwin .cld-act .btn { white-space: nowrap; }
#ui .bookwin .cld-ok { padding: 0 8px; font: 800 1.1rem var(--thai); color: var(--cl-good); }
#ui .bookwin .cld-foot { padding: 0 2px; font: 500 0.7rem var(--thai); color: var(--cl-dim); text-align: right; }

/* the sources under a slot: a short list of tappable rows (gear: .eco-src rows; materials: MatInfo's .mi-sec rows, which had
   no style in this book and showed the item's picture page-wide - the bug in the user's screenshot of 2026-10-18) */
#ui .bookwin .cld-src { margin: 0 0 4px 48px; }
#ui .bookwin .cld-src :is(.eco-src, .mi-sec) { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0 0 5px; border-radius: 8px; overflow: hidden; background: var(--cl-panel); box-shadow: inset 0 0 0 1px var(--cl-line); }
#ui .bookwin .cld-src .eco-src > b, #ui .bookwin .cld-src .mi-sec h6 { margin: 0; display: flex; gap: 6px; align-items: baseline; padding: 4px 9px; font: 700 0.78rem/1.25 var(--thai); color: var(--cl-acc); background: color-mix(in srgb, var(--cl-acc) 12%, transparent); }
#ui .bookwin .cld-src .mi-sec h6 small { font: 600 0.68rem var(--thai); color: var(--cl-ink2); }
#ui .bookwin .cld-src .mi-row { display: flex; flex-direction: column; gap: 2px; margin: 0 4px; }
#ui .bookwin .cld-src :is(.eco-srcrow, .mi-rh) { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 7px; width: auto; margin: 0 4px; padding: 4px 7px; border: 0; border-radius: 6px;
  background: var(--cl-panel2); color: var(--cl-ink); text-align: left; cursor: pointer; box-shadow: none; }
#ui .bookwin .cld-src .mi-rh { margin: 0; width: 100%; }
#ui .bookwin .cld-src :is(.eco-srcrow, .mi-rh) img { width: 22px; height: 22px; object-fit: contain; }
#ui .bookwin .cld-src :is(.eco-srcrow, .mi-rh) span { min-width: 0; display: flex; flex-direction: column; }
#ui .bookwin .cld-src :is(.eco-srcrow, .mi-rh) b { font: 600 0.78rem/1.3 var(--thai); color: var(--cl-ink); }
#ui .bookwin .cld-src :is(.eco-srcrow, .mi-rh) small { font: 500 0.7rem/1.35 var(--thai); color: var(--cl-ink2); }
#ui .bookwin .cld-src :is(.eco-srcrow, .mi-rh) em { font: 700 0.74rem var(--thai); font-style: normal; color: var(--cl-acc); white-space: nowrap; }
#ui .bookwin .cld-src :is(.eco-srcrow, .mi-rh):hover:not(:disabled) { background: color-mix(in srgb, var(--cl-acc) 16%, transparent); box-shadow: inset 3px 0 0 var(--cl-acc); }
#ui .bookwin .cld-src :is(.eco-srcrow, .mi-rh):disabled { cursor: default; opacity: 0.8; }
#ui .bookwin .cld-src .eco-srcgo { display: flex; align-items: center; gap: 4px; margin: 0 4px; }
#ui .bookwin .cld-src .eco-srcgo .eco-srcrow { flex: 1; margin: 0; }
#ui .bookwin .cld-src .mi-tag { margin-left: 5px; padding: 0 5px; border-radius: 6px; background: color-mix(in srgb, var(--cl-acc) 16%, transparent); color: var(--cl-acc); font: 700 0.62rem/1.5 var(--thai); font-style: normal; }
#ui .bookwin .cld-src .mi-maps { display: flex; flex-direction: column; gap: 2px; margin: 0 0 0 18px; padding-left: 6px; border-left: 2px solid var(--cl-line); }
#ui .bookwin .cld-src .mi-map { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; padding: 1px 2px; border-radius: 6px; }
#ui .bookwin .cld-src .mi-map.rec { background: var(--cl-goodbg); }
#ui .bookwin .cld-src :is(.mi-mapn, .mi-mob, .mi-chip) { display: inline-flex; align-items: baseline; gap: 3px; padding: 0 6px; border: 0; border-radius: 7px; background: var(--cl-panel2); color: var(--cl-ink); font: 600 0.7rem/1.6 var(--thai); cursor: pointer; }
#ui .bookwin .cld-src .mi-mapn { background: rgba(95, 180, 255, 0.16); }
#ui .bookwin .cld-src :is(.mi-mapn, .mi-mob, .mi-chip):hover { background: color-mix(in srgb, var(--cl-acc) 22%, transparent); }
#ui .bookwin .cld-src :is(.mi-mapn, .mi-mob) i { font: 600 0.62rem Fredoka, sans-serif; font-style: normal; color: var(--cl-ink2); }
#ui .bookwin .cld-src .mi-mapn em { padding: 0 4px; border-radius: 5px; background: #3f8f3a; color: #f1ffe8; font: 700 0.6rem/1.5 var(--thai); font-style: normal; }
#ui .bookwin .cld-src :is(.mi-map > small, .mi-mobs > small) { font: 600 0.66rem var(--thai); color: var(--cl-ink2); }
#ui .bookwin .cld-src :is(.mi-mobs, .mi-chips) { display: flex; flex-wrap: wrap; gap: 2px; }
#ui .bookwin .cld-src .mi-chip img { width: 16px; height: 16px; object-fit: contain; align-self: center; }
#ui .bookwin .cld-src .mi-more summary { cursor: pointer; padding: 1px 4px; font: 700 0.7rem var(--thai); color: var(--cl-acc); }
#ui .bookwin .cld-src :is(.mi-none, .cld-none) { margin: 3px 9px; font: 600 0.74rem var(--thai); color: var(--cl-ink2); }

/* ---------- the bar pinned to the foot of the left page: register-all ---------- */
#ui .bookwin .clo-foot { position: sticky; bottom: -4px; z-index: 3; display: flex; align-items: center; gap: 8px; margin: auto -6px -4px; padding: 8px 8px 10px;
  background: var(--cl-page); border-top: 1px solid var(--cl-line); box-shadow: 0 -12px 10px -8px var(--cl-shade); }
#ui .bookwin .clo-chk { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 4px 8px; border: 0; border-radius: 8px; background: var(--cl-panel); color: var(--cl-ink); font: 600 0.78rem var(--thai); cursor: pointer; }
#ui .bookwin .clo-chk i { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 4px; border: 1.5px solid var(--cl-acc); font: 800 11px/1 sans-serif; font-style: normal; color: var(--cl-acc); }
#ui .bookwin .clo-chk.on i { background: var(--cl-acc); color: #2a1a06; }
#ui .bookwin .clo-chk small { font: 600 0.7rem var(--thai); color: var(--cl-ink2); }
#ui .bookwin .clo-allbtn { flex: 1 1 auto; white-space: nowrap; }
#ui .bookwin .clo-allbtn:disabled { opacity: 0.55; filter: grayscale(0.6); cursor: default; }
#ui .bookwin .clo-foot.ask span { flex: 1; font: 700 0.78rem/1.35 var(--thai); color: var(--cl-acc); }
#ui .bookwin .clo-foot.ask .btn { flex: 0 0 auto; }

/* the yes / no box: hangs under the page's sticky head over the list, so it shows wherever the list is scrolled */
#ui .bookwin .clo-ask { position: absolute; left: 4px; right: 4px; top: calc(100% + 4px); z-index: 6; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; text-align: left;
  background: #2a1712; border: 2px solid #ff8f6b; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
#ui .bookwin .clo-ask > b { font: 800 1rem var(--thai); color: #ffcf6a; }
#ui .bookwin .clo-ask > small { font: 500 0.8rem var(--thai); color: #e9dcc4; }
#ui .bookwin .clo-ask-items { display: flex; flex-wrap: wrap; gap: 6px 14px; }
#ui .bookwin .clo-ask-it { display: flex; align-items: center; gap: 8px; }
#ui .bookwin .clo-ask-it .eco-iframe { width: 42px; height: 42px; }
#ui .bookwin .clo-ask-it .eco-iframe img { width: 34px; height: 34px; }
#ui .bookwin .clo-ask-it > span:last-child { display: flex; flex-direction: column; }
#ui .bookwin .clo-ask-it b { font: 700 0.9rem var(--thai); }
#ui .bookwin .clo-ask-it em { font: 600 0.76rem var(--thai); font-style: normal; color: #ff9f80; }
#ui .bookwin .clo-ask-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- the right page ---------- */
#ui .bookwin .clo-side { display: flex; flex-direction: column; gap: 6px; text-align: center; }
#ui .bookwin .clo-side h4 { margin: 8px 0 2px; font: 700 1rem var(--thai); color: var(--cl-ink); }
#ui .bookwin .clo-recs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#ui .bookwin .clo-rec { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1px 6px; padding: 7px 10px; border-radius: 9px; cursor: pointer; text-align: left;
  border: 1px solid var(--cl-line); background: var(--cl-panel); color: var(--cl-ink); }
#ui .bookwin .clo-rec:hover { border-color: var(--pc); }
#ui .bookwin .clo-rec.on { border-color: var(--pc); box-shadow: inset 0 0 0 1px var(--pc); }
#ui .bookwin .clo-rec span { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font: 700 0.82rem var(--thai); color: var(--pc); }
:root[data-booklight] #ui .bookwin .clo-rec span { color: color-mix(in srgb, var(--pc) 40%, var(--bk-ink)); }
#ui .bookwin .clo-rec span i { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--pc) 45%, color-mix(in srgb, var(--pc) 45%, #000)); border: 1.5px solid #14100c; }
#ui .bookwin .clo-rec b { font: 800 1.02rem var(--thai); color: var(--cl-ink); }
#ui .bookwin .clo-rec small { font: 500 0.7rem var(--thai); color: var(--cl-ink2); text-align: right; }
#ui .bookwin .clo-fill { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 3px 8px; margin-top: 4px; padding: 8px 10px; border-radius: 9px; text-align: left;
  border: 1px solid var(--cl-line); background: var(--cl-panel); }
#ui .bookwin .clo-fill > span { font: 600 0.82rem var(--thai); color: var(--cl-ink2); }
#ui .bookwin .clo-fill > b { font: 700 0.84rem Fredoka, var(--thai); color: var(--cl-ink); }
#ui .bookwin .clo-fbar { position: relative; grid-column: 1 / -1; height: 16px; margin-top: 2px; border-radius: 3px; overflow: hidden; background: #1a140e; box-shadow: inset 0 0 0 1px rgba(255, 214, 120, 0.35); }
#ui .bookwin .clo-fbar i { display: block; height: 100%; min-width: 2px; background: linear-gradient(180deg, #e8c46a, #a87a26); }
:root[data-booklight] #ui .bookwin .clo-fbar { background: color-mix(in srgb, var(--bk-acc) 14%, #fffaf2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk-acc) 40%, transparent); }
#ui .bookwin .clo-fbar em { position: absolute; inset: 0; display: grid; place-items: center; font: 700 0.74rem/1 Fredoka, sans-serif; font-style: normal; color: #fff; text-shadow: 1px 1px 0 #000; }
#ui .bookwin .clo .clo-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin: 0; padding: 0; list-style: none; }
#ui .bookwin .clo .clo-stats li { padding: 0; }
#ui .bookwin .clo .clo-stats li.none { grid-column: 1 / -1; font: 500 0.85rem var(--thai); color: var(--cl-ink2); }
#ui .bookwin .clo-statb { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 3px 6px; border: 0; border-radius: 6px; background: none; cursor: pointer; text-align: left;
  font: 600 0.8rem var(--thai); color: var(--cl-ink); }
#ui .bookwin .clo-statb span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ui .bookwin .clo-statb b { flex: 0 0 auto; color: var(--cl-acc); }
#ui .bookwin .clo-statb:hover { background: var(--cl-panel); }
#ui .bookwin .clo-next { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
#ui .bookwin .clo-next li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 6px; background: var(--cl-panel2); font: 600 0.8rem var(--thai); color: var(--cl-ink); text-align: left; }
#ui .bookwin .clo-next b { color: var(--cl-acc); white-space: nowrap; }
#ui .bookwin .clo-help { margin: 8px 0 0; padding: 8px 10px 8px 24px; border-radius: 9px; background: var(--cl-panel2); text-align: left; }
#ui .bookwin .clo-help li { margin: 2px 0; font: 500 0.74rem/1.45 var(--thai); color: var(--cl-ink2); }

/* ---------- a slot's three states (2026-10-18, the user: "ผมแทบแยกไม่ออกว่ามีของให้กดใส่ มันคล้ายๆ กับช่องที่ไม่มีของ" - the old
   "can" frame was green like the grade ดี's colour). The grade is the tint INSIDE the slot (LORDNINE's coloured backs); the
   frame and a corner badge tell the state, a shape each (+ / ✓ / lock), not only a colour:
     ใส่ได้ตอนนี้  full colour, gold frame with a soft glow, gold "+"
     ใส่แล้ว      full colour, green frame, green ✓
     ยังไม่มี      grey picture, dark frame, grey lock */
#ui .bookwin .clo { --cl-can: #ffc93a; --cl-canink: #3a2400; --cl-canbg: rgba(255, 201, 58, 0.14); --cl-in: #35b874; --cl-miss: #4a433a; }
:root[data-booklight] #ui .bookwin .clo { --cl-can: #c27c00; --cl-canink: #fff8e6; --cl-canbg: rgba(214, 150, 20, 0.16); --cl-in: #1f8a52; --cl-miss: #a99f90; }
#ui .bookwin .clo :is(.clo-icons .clx-ic, .cld-pic) { overflow: visible; border: 2px solid var(--cl-miss);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--gc, #c9c2b0) 42%, #1c1712), #110d09 78%); }
:root[data-booklight] #ui .bookwin .clo :is(.clo-icons .clx-ic, .cld-pic) { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--gc, #c9c2b0) 45%, #fff), color-mix(in srgb, var(--gc, #c9c2b0) 18%, #efe7da) 80%); }
#ui .bookwin .clo :is(.clo-icons .clx-ic, .cld-pic) img { filter: none; opacity: 1; }
/* ยังไม่มี */
#ui .bookwin .clo :is(.clo-icons .clx-ic, .cld-pic).miss img { filter: grayscale(1) brightness(0.62) contrast(0.9); opacity: 0.85; }
:root[data-booklight] #ui .bookwin .clo :is(.clo-icons .clx-ic, .cld-pic).miss img { filter: grayscale(1) contrast(0.8); opacity: 0.5; }
/* ใส่ได้ตอนนี้ */
#ui .bookwin .clo :is(.clo-icons .clx-ic, .cld-pic).can { border-color: var(--cl-can); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 7px 1px color-mix(in srgb, var(--cl-can) 70%, transparent); animation: cloCan 1.8s ease-in-out infinite; cursor: pointer; }
#ui .bookwin .clo :is(.clo-icons .clx-ic, .cld-pic).can:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 12px 3px var(--cl-can); }
@keyframes cloCan { 50% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 12px 3px color-mix(in srgb, var(--cl-can) 85%, transparent); } }
@media (prefers-reduced-motion: reduce) { #ui .bookwin .clo :is(.clo-icons .clx-ic, .cld-pic).can { animation: none; } }
/* ใส่แล้ว */
#ui .bookwin .clo :is(.clo-icons .clx-ic, .cld-pic).in { border-color: var(--cl-in); }
#ui .bookwin .clo .clo-icons .clx-ic.in img { opacity: 1; }
/* the corner badge (top right; PvP stays top left, +N / S bottom right) */
#ui .bookwin .clo .clo-icons .clx-ic i.clo-bdg, #ui .bookwin .clo .cld-pic i.clo-bdg { position: absolute; inset: -6px -6px auto auto; left: auto; width: 15px; height: 15px; display: grid; place-items: center; z-index: 2;
  border-radius: 50%; font: 900 11px/1 Fredoka, sans-serif; font-style: normal; background: var(--cl-miss); color: #d8d0c0; box-shadow: 0 0 0 1.5px #14100c; }
#ui .bookwin .clo .clo-icons .clx-ic.in i.clo-bdg, #ui .bookwin .clo .cld-pic.in i.clo-bdg { background: var(--cl-in); color: #fff; font-size: 10px; }
#ui .bookwin .clo .clo-icons .clx-ic.can i.clo-bdg, #ui .bookwin .clo .cld-pic.can i.clo-bdg { background: var(--cl-can); color: var(--cl-canink); font-size: 13px; }
#ui .bookwin .clo i.clo-bdg svg { width: 9px; height: 9px; display: block; }
:root[data-booklight] #ui .bookwin .clo .clo-icons .clx-ic.miss i.clo-bdg, :root[data-booklight] #ui .bookwin .clo .cld-pic.miss i.clo-bdg { color: #fff; box-shadow: 0 0 0 1.5px #fff; }
#ui .bookwin .clo .clo-icons .clx-ic.miss .clo-set { opacity: 0.75; }

/* a row with something to put in now: gold edge + "+ ใส่ได้ N" before its name (not only the ใส่ได้ filter) */
#ui .bookwin .clo .clo-row.can { border-color: color-mix(in srgb, var(--cl-can) 75%, transparent); background: linear-gradient(90deg, var(--cl-canbg), var(--cl-panel) 55%); box-shadow: inset 3px 0 0 var(--cl-can); }
#ui .bookwin .clo-nm { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
#ui .bookwin .clo-cantag { flex: 0 0 auto; padding: 1px 7px; border-radius: 9px; font: 800 0.7rem/1.5 var(--thai); font-style: normal; white-space: nowrap; color: var(--cl-canink); background: var(--cl-can); }

/* the open row: the same colours */
#ui .bookwin .cld-slot.can { box-shadow: inset 3px 0 0 var(--cl-can); background: var(--cl-canbg); }
#ui .bookwin .cld-have.ok { color: var(--cl-can) !important; }
:root[data-booklight] #ui .bookwin .cld-have.ok { color: color-mix(in srgb, var(--cl-can) 80%, #000) !important; }
#ui .bookwin .cld-have.in { color: var(--cl-in) !important; }

/* ---------- the stat filter (2026-10-18, the user: "เพิ่มตัวกรองสเตตัสหน่อย"; LORDNINE's ออปชันค้นหา) ---------- */
#ui .bookwin .clo-stbtn { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cl-acc) 55%, transparent); background: none; color: var(--cl-ink); font: 700 0.8rem var(--thai); white-space: nowrap; cursor: pointer; }
#ui .bookwin .clo-stbtn.on, #ui .bookwin .clo-stbtn.open { background: var(--cl-acc); border-color: var(--cl-acc); color: #2a1a06; }
:root[data-booklight] #ui .bookwin .clo-stbtn.on, :root[data-booklight] #ui .bookwin .clo-stbtn.open { color: #fff; }
#ui .bookwin .clo-stchips { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
#ui .bookwin .clo-stchips em { font: 600 0.74rem var(--thai); font-style: normal; color: var(--cl-ink2); }
#ui .bookwin .clo-stchip { padding: 1px 8px; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--cl-acc) 22%, transparent); color: var(--cl-ink); font: 700 0.74rem/1.6 var(--thai); cursor: pointer; }
#ui .bookwin .clo-stchip:hover { background: color-mix(in srgb, var(--cl-acc) 38%, transparent); }
#ui .bookwin .clo-stclear { margin-left: auto; padding: 0 4px; border: 0; background: none; color: var(--cl-acc); font: 700 0.74rem var(--thai); text-decoration: underline; cursor: pointer; }
#ui .bookwin .clo-statpick { position: absolute; left: 4px; right: 4px; top: calc(100% + 4px); z-index: 7; display: flex; flex-direction: column; gap: 6px; max-height: 470px; overflow-y: auto;
  padding: 10px 12px; border-radius: 10px; text-align: left; background: var(--cl-page); border: 2px solid var(--cl-acc); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); }
#ui .bookwin .clo-sph { display: flex; flex-direction: column; }
#ui .bookwin .clo-sph b { font: 800 0.95rem var(--thai); color: var(--cl-acc); }
#ui .bookwin .clo-sph small { font: 500 0.72rem var(--thai); color: var(--cl-ink2); }
#ui .bookwin .clo-spg { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 6px; padding-top: 5px; border-top: 1px dashed var(--cl-line); }
#ui .bookwin .clo-spg > em { padding-top: 3px; font: 800 0.78rem var(--thai); font-style: normal; color: var(--cl-ink); }
#ui .bookwin .clo-spg > span { display: flex; flex-wrap: wrap; gap: 4px; }
#ui .bookwin .clo-spk { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--cl-line); background: var(--cl-panel2); color: var(--cl-ink); font: 600 0.76rem/1.5 var(--thai); cursor: pointer; }
#ui .bookwin .clo-spk small { font: 600 0.66rem Fredoka, var(--thai); color: var(--cl-ink2); }
#ui .bookwin .clo-spk:hover { border-color: var(--cl-acc); }
#ui .bookwin .clo-spk.on { background: var(--cl-acc); border-color: var(--cl-acc); color: #2a1a06; font-weight: 800; }
:root[data-booklight] #ui .bookwin .clo-spk.on { color: #fff; }
#ui .bookwin .clo-spk.on small { color: inherit; opacity: 0.8; }
#ui .bookwin .clo-spf { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
#ui .bookwin .clo mark.clo-hl { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--cl-acc) 30%, transparent); color: var(--cl-ink); font-weight: 700; }
#ui .bookwin .clo-statb.on { background: color-mix(in srgb, var(--cl-acc) 22%, transparent); }
#ui .bookwin .clo-empty span { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }

/* ---------- the book v3 (2026-10-18, MIR4's structure on our page): grade chips, the +N / tier filters, slots four a row
   with the tier (Roman) and the +N, the right page's เอฟเฟกต์โดยรวม / ความคืบหน้า with ใส่อัตโนมัติ at its foot ---------- */
#ui .bookwin .clo-grades { display: flex; flex-wrap: nowrap; gap: 3px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--cl-acc) 50%, transparent) transparent; padding-bottom: 1px; }
#ui .bookwin .clo-grades .eco-chip { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 0.76rem; white-space: nowrap; }
#ui .bookwin .clo-gdot { width: 9px; height: 9px; border-radius: 50%; background: var(--gcol, #ccc); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); flex: none; }
#ui .bookwin .clo-grades .clo-can { min-width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: #e8742a; color: #fff; font: 900 10px/1 Fredoka, sans-serif; font-style: normal; }
#ui .bookwin .clo-filt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 600 0.78rem var(--thai); color: var(--cl-ink2); }
#ui .bookwin .clo-filt label { display: inline-flex; align-items: center; gap: 4px; }
#ui .bookwin .clo-filt select { padding: 2px 4px; border-radius: 7px; border: 1px solid var(--cl-line); background: var(--cl-panel); color: var(--cl-ink); font: 700 0.78rem Fredoka, var(--thai); cursor: pointer; }
#ui .bookwin .clo-filt select option { background: #1d1912; color: #f2ead6; }
#ui .bookwin .clo-reset { margin-left: auto; width: 28px; height: 26px; padding: 0; border-radius: 7px; border: 1px solid var(--cl-line); background: var(--cl-panel); color: var(--cl-acc); font: 800 15px/1 sans-serif; cursor: pointer; }
#ui .bookwin .clo-reset:disabled { opacity: 0.4; cursor: default; }
#ui .bookwin .clo-refund { border-color: var(--cl-can); }

/* slots: four a row, wrapping right-aligned (MIR4); the tier bottom left, the +N bottom right */
#ui .bookwin .clo .clo-icons { flex-wrap: wrap; max-width: calc(4 * 42px + 3 * 4px); }
#ui .bookwin .clo .clo-row.many .clo-icons { max-width: calc(4 * 37px + 3 * 3px); }
#ui .bookwin .clo-icons .clx-ic .clo-tier { position: absolute; left: 2px; right: auto; bottom: 0; font: 700 10px/1 'Times New Roman', serif; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }
:root[data-booklight] #ui .bookwin .clo-icons .clx-ic .clo-tier { color: var(--bk-ink); text-shadow: 1px 1px 0 #fff; }

/* the right page: a column as tall as the page, ใส่อัตโนมัติ / ความคืบหน้า pinned to its foot */
#ui .bookwin .clo-side { min-height: 100%; }
#ui .bookwin .clo-rfoot { position: sticky; bottom: -4px; z-index: 3; display: flex; flex-direction: column; gap: 6px; margin: auto -6px -4px; padding: 8px 8px 10px;
  background: var(--cl-page); border-top: 1px solid var(--cl-line); box-shadow: 0 -12px 10px -8px var(--cl-shade); }
#ui .bookwin .clo-rfoot > div { display: flex; gap: 8px; }
#ui .bookwin .clo-rfoot > div .btn { flex: 1 1 0; white-space: nowrap; }
#ui .bookwin .clo-rfoot .clo-chk { align-self: flex-start; }
#ui .bookwin .clo-rfoot.ask > span { font: 700 0.78rem/1.35 var(--thai); color: var(--cl-acc); text-align: left; }
#ui .bookwin .clo-progbtn.on { box-shadow: inset 0 0 0 2px var(--cl-acc); }
/* เอฟเฟกต์โดยรวม's empty state (MIR4: "none completed yet") */
#ui .bookwin .clo-fxempty { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 30px 10px; color: var(--cl-ink2); }
#ui .bookwin .clo-fxempty i { position: relative; width: 46px; height: 46px; display: grid; place-items: center; font: 800 22px/1 Fredoka, sans-serif; font-style: normal; }
#ui .bookwin .clo-fxempty i::before { content: ''; position: absolute; inset: 6px; transform: rotate(45deg); border: 2px solid var(--cl-ink2); border-radius: 5px; }
#ui .bookwin .clo-fxempty b { margin-top: 8px; font: 700 0.95rem var(--thai); color: var(--cl-ink); }
#ui .bookwin .clo-fxempty small { font: 500 0.78rem var(--thai); }
/* ความคืบหน้า: by grade */
#ui .bookwin .clo-gbars { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
#ui .bookwin .clo-gbars li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; padding: 4px 8px; border-radius: 7px; background: var(--cl-panel2); text-align: left; }
#ui .bookwin .clo-gbars li span { display: inline-flex; align-items: center; gap: 6px; font: 700 0.8rem var(--thai); color: var(--cl-ink); }
#ui .bookwin .clo-gbars li b { font: 700 0.78rem Fredoka, var(--thai); color: var(--cl-ink2); }
#ui .bookwin .clo-gbars .clo-fbar { height: 7px; margin-top: 0; }
#ui .bookwin .clo-gbars .clo-fbar i { background: var(--gcol); }