/* MIDU OS v3: nhập skill từ Xưởng vào /cong-cu. Hàng chỉ tham chiếu, cửa sổ xem trước, nhãn giấy phép và nguồn. */

/* Hàng skill chỉ tham chiếu: nhạt hơn một chút để phân biệt với skill dùng được. */
.cc-hang.cc-tham-chieu .li-title { color: var(--text-2); }
.cc-hang.cc-tham-chieu .cc-hang-main { opacity: .92; }

.cc-nguon-tc { word-break: break-all; overflow-wrap: anywhere; }
.cc-chi-ten { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r); background: var(--warn-soft); color: var(--text-2); }
.cc-chi-ten .ic { flex: none; margin-top: 2px; color: #c98500; }

/* Cửa sổ nhập */
.form.cn { min-width: 0; }
.cn .cc-nd { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--fs-xs); min-height: 130px; resize: vertical; }
.cn-file { padding: 8px; min-height: 44px; width: 100%; box-sizing: border-box; }

.cn-xem { display: flex; flex-direction: column; gap: 10px; }
.cn-sos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.cn-so { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r); background: var(--soft, var(--fill)); min-width: 0; }
.cn-so b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; color: var(--text); }
.cn-so span { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.35; }

.cn-sai { display: block; padding: 10px 12px; border-radius: var(--r); background: var(--crit-soft, rgba(220, 53, 69, .12)); color: var(--text-2); }
.cn-sai > .ic { margin-right: 6px; vertical-align: -3px; color: var(--crit, #c0392b); }
.cn-loi { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.cn-loi li { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .cn-file, .cn .input { min-height: 44px; }
  .cn .cc-nd { min-height: 120px; }
  .modal-foot .btn { min-height: 44px; }
  .page-head .btn[data-act="cc-nhap"], .page-head .btn[data-act="cc-them"] { min-height: 44px; }
  .cn-sos { grid-template-columns: 1fr 1fr; }
  .seg[aria-label="Nguồn công cụ"] { max-width: 100%; }
  .seg[aria-label="Nguồn công cụ"] button { min-height: 44px; }
}