/* KOF STORM · Quản trị — "Nội dung game › Danh sách" (static/catalog.js). Dùng biến màu của app.css. */

/* thanh bên: tiêu đề nhóm con trong menu Nội dung game */
.sb-sub-h { padding: 9px 10px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.sb-sub-h:first-child { padding-top: 4px; }

/* thanh tab: ngăn cách "Danh sách" ↔ "Chỉnh nội dung" */
.tab-sep { flex: none; width: 1px; margin: 8px 6px 10px; background: var(--line-2); }
.tab.tab-list { color: var(--text-2); }
.tab.tab-list .ic { color: var(--acc); }

.w-320 { width: 320px !important; flex: none; max-width: 100%; }
.w-180 { width: 180px !important; flex: none; max-width: 100%; }
.mb-s { margin-bottom: 8px; }
.ct-intro-s { margin-top: 6px; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ct-intro-s .pill { font-size: 10.5px; padding: 0 7px; line-height: 16px; }
.ct-chipbar { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ct-groups button .cnt { font-variant-numeric: tabular-nums; }

/* bảng danh sách */
.tbl.ct-list th, .tbl.ct-list td { padding-left: 10px; padding-right: 10px; }
.tbl.ct-list td { padding-top: 9px; padding-bottom: 9px; }
.ct-row td { vertical-align: top; }
.ct-stk { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ct-name-s { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.ct-name-s .q { height: 17px; min-width: 30px; font-size: 10px; }
.ct-row.st-missing td:first-child { box-shadow: inset 3px 0 0 rgba(242, 68, 90, .55); }
.ct-row.st-partial td:first-child { box-shadow: inset 3px 0 0 rgba(245, 165, 36, .5); }
.ct-name { min-width: 150px; max-width: 260px; }
.ct-name .t-main { white-space: normal; }
.ct-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.ct-clip.w2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.45; }
.ct-zh { color: var(--muted); font-size: 12.5px; }
.ok-t { color: #7ee2a8; }

/* ngăn kéo chi tiết */
.ct-drawer .drawer-h { gap: 12px; }
.ct-drawer .drawer-h h2 .pill, .ct-drawer .drawer-h h2 .q { font-size: 11px; }
.ct-drawer .tabs.hidden { display: none; }
.ct-ic { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--text-2);
  background: var(--panel-3); border: 1px solid var(--line-2); }
.ct-ic .ic { width: 24px; height: 24px; }
.ct-ic.q1 { color: var(--q1); border-color: rgba(163, 171, 189, .45); background: rgba(163, 171, 189, .08); }
.ct-ic.q2 { color: var(--q2); border-color: rgba(79, 168, 255, .45); background: rgba(79, 168, 255, .09); }
.ct-ic.q3 { color: var(--q3); border-color: rgba(180, 123, 255, .45); background: rgba(180, 123, 255, .09); }
.ct-ic.q4 { color: var(--q4); border-color: rgba(255, 176, 32, .5); background: rgba(255, 176, 32, .09); }
.ct-ic.q5 { color: var(--q5); border-color: rgba(255, 77, 94, .5); background: rgba(255, 77, 94, .09); }
.ct-g { align-items: start; }
.ct-lead { font-weight: 600; color: var(--text); margin-bottom: 6px; }
.ct-quote { margin: 10px 0 0; padding: 6px 12px; border-left: 3px solid var(--acc-line); color: var(--text-2); font-style: italic; }
.ct-des { white-space: pre-line; line-height: 1.6; color: var(--text-2); }
.ct-des .hl { color: #ffb347; font-weight: 650; }
.ct-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ct-tags .pill .ic { width: 12px; height: 12px; }
.ct-attrs { display: flex; flex-wrap: wrap; gap: 4px 5px; }
.ct-attrs.col { flex-direction: column; align-items: flex-start; }
.ct-attr { display: inline-flex; padding: 1px 8px; border-radius: 6px; background: rgba(44, 207, 111, .07); border: 1px solid rgba(44, 207, 111, .2); color: #a9e9c3; font-size: 12px; white-space: nowrap; }
.ct-attrs.sm .ct-attr { font-size: 11.5px; padding: 0 7px; }
.ct-rt { color: var(--muted); font-size: 10.5px; margin-right: 2px; }
.rchip.ct-rw { cursor: pointer; font: inherit; font-size: 11.5px; }
.rchip.ct-rw:hover { border-color: rgba(255, 176, 32, .6); background: rgba(255, 176, 32, .16); color: #ffe2a8; }
.rchip.ct-miss { background: var(--err-soft); border-color: rgba(242, 68, 90, .3); color: #ffb3bd; }
.rchip.ct-miss .ic { width: 12px; height: 12px; }
.ct-link { border: 0; background: none; padding: 0; font: inherit; color: #ffb27d; cursor: pointer; text-align: left; }
.ct-link:hover { color: #ffd2b0; text-decoration: underline; text-underline-offset: 2px; }
.ct-link.b { font-weight: 600; }
.ct-link.ct-chipl { display: inline-flex; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--acc-line); background: var(--acc-soft); font-size: 12px; font-weight: 600; }
.ct-link.ct-chipl:hover { text-decoration: none; background: rgba(255, 106, 26, .2); }
.ct-rs + .ct-rs { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line-2); }
.ct-rs .reward-chips { margin-top: 4px; }
.ct-plots { display: flex; flex-direction: column; gap: 4px; }
.ct-bar-row { gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }

/* kỹ năng */
.ct-sks { display: flex; flex-direction: column; gap: 10px; }
.ct-sk { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 12px 14px; }
.ct-sk-main { border-color: var(--acc-line); background: linear-gradient(135deg, rgba(255, 106, 26, .07), transparent 60%), var(--panel); }
.ct-sk-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ct-sk-h b { font-size: 14px; color: var(--text); }
.ct-sk-h .sp { flex: 1; }
.ct-sk-lv { display: flex; flex-direction: column; }
.ct-sk-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.ct-sk-row:first-child { border-top: 0; padding-top: 2px; }
.ct-sk-k { font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.ct-zhd { margin-top: 6px; }
.ct-zhd summary { cursor: pointer; color: var(--faint); font-size: 11.5px; user-select: none; }
.ct-zhd summary:hover { color: var(--muted); }
.ct-zhd .ct-zh { margin-top: 4px; white-space: pre-line; }

/* bảng chỉ số mốc sao × cấp */
.ct-matrix th.grp { text-align: center; border-left: 1px solid var(--line-2); color: var(--text-2); }
.ct-matrix th.gl, .ct-matrix td.gl { border-left: 1px solid var(--line-2); }
.ct-matrix td.pw { color: var(--q4); font-weight: 650; }
.ct-matrix tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .012); }

/* rương: tỉ lệ */
.ct-chance { min-width: 170px; }
.ct-pbar { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ct-pbar .b { flex: none; width: 90px; height: 6px; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
.ct-pbar .b i { display: block; height: 100%; border-radius: 99px; background: var(--grad); }
.ct-pbar b { font-variant-numeric: tabular-nums; }

/* nguồn nhận */
.ct-src { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ct-src li { position: relative; padding: 6px 10px 6px 14px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); line-height: 1.5; font-size: 12.5px; color: var(--text-2); }
.ct-src li::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ok); }
.ct-src li.warn::before { background: var(--warn); }
.ct-src li.info::before { background: var(--info); }
.ct-src li.mut::before { background: var(--line-2); }
.ct-src li.mut { color: var(--muted); }
.ct-src li b { color: var(--text); }
.ct-srcg { display: flex; flex-direction: column; gap: 14px; }
.ct-srcg-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ct-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.ct-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.ct-legend .lg::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--ok); }
.ct-legend .lg.info::before { background: var(--info); }
.ct-legend .lg.warn::before { background: var(--warn); }
.ct-legend .lg.mut::before { background: var(--line-2); }

/* hệ thống (nút trong game + xử lý máy chủ) */
.ct-sysg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ct-sys { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); padding: 12px 14px; min-width: 0; }
.ct-sys-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ct-sys-h .sp { flex: 1; }
.ct-sys .kv { grid-template-columns: minmax(100px, auto) 1fr; font-size: 12.5px; gap: 6px 14px; }
.card-b > .ct-sys { border: 0; padding: 0; background: none; }

@media (max-width: 1100px) {
  .ct-sysg { grid-template-columns: 1fr; }
  .ct-sk-row { grid-template-columns: 1fr; gap: 4px; }
  .w-320 { width: 240px !important; }
}
.ct-note-d { color: var(--warn); font-weight: 700; margin-left: 2px; cursor: help; }
@media (max-width: 640px) {
  .ct-clip { max-width: 180px !important; }
  .ct-name { min-width: 110px; }
}