/* Commercial platform engine: record pages, lists, timelines and shared dashboard panels (prefix cb-). */
.cb-head { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cb-head-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 18px; }
.cb-head-id b { font-family: var(--fd); letter-spacing: .02em; color: var(--text); }
.cb-head-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--panel2); border: 1px solid var(--line2); padding: 2px 7px; border-radius: 3px; }
.cb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cb-fact { background: linear-gradient(180deg, #fbfdff, #f2f7fb); border: 1px solid #dde5ed; border-left: 3px solid var(--brand-primary); border-radius: 3px; padding: 8px 10px; min-width: 0; }
.cb-fact span { display: block; font-size: 11.5px; color: var(--muted); }
.cb-fact b { display: block; font-size: 16px; margin-top: 2px; overflow-wrap: anywhere; }
.cb-fact small { display: block; font-size: 11.5px; color: var(--text2); margin-top: 2px; }
.cb-fact.ok { border-left-color: #12a079; } .cb-fact.warn { border-left-color: #e0a106; } .cb-fact.bad { border-left-color: #d6334b; } .cb-fact.nt { border-left-color: #8a9bb0; }
.cb-actlist { display: flex; flex-direction: column; gap: 8px; }
.cb-actlist form, .cb-actlist .ct-btn { width: 100%; }
.cb-actlist .ct-btn { justify-content: flex-start; }
.cb-acthelp { margin: -4px 0 2px; font-size: 11.5px; color: var(--muted); }
.cb-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.cb-timeline:before { content: ''; position: absolute; left: 13px; top: 4px; bottom: 4px; width: 2px; background: #e3eaf1; }
.cb-timeline li { display: flex; gap: 10px; padding: 6px 0; position: relative; }
.cb-tl-ico { flex: 0 0 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid #cfe0f1; display: flex; align-items: center; justify-content: center; color: var(--brand-primary); z-index: 1; }
.cb-tl-body { min-width: 0; }
.cb-tl-body b { display: block; font-size: 13px; }
.cb-tl-body .sub { display: block; font-size: 11.5px; color: var(--muted); }
.cb-tl-body p { margin: 4px 0 0; background: var(--panel2); border: 1px solid var(--line2); border-radius: 3px; padding: 6px 8px; font-size: 12.5px; overflow-wrap: anywhere; }
.cb-noteform { margin-top: 10px; border-top: 1px dashed var(--line2); padding-top: 10px; }
.cb-file { padding: 6px 0; border-bottom: 1px solid var(--line2); overflow-wrap: anywhere; }
.cb-file .sub { display: block; font-size: 11.5px; color: var(--muted); margin-left: 18px; }
.cb-upload { margin-top: 10px; }
.cb-bulk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid #e0e7ed; }
.cb-bulk select { max-width: 280px; }
.cb-tick { width: 30px; }
.cb-tbl td .sub, .cb-ptable td .sub { display: block; font-size: 11.5px; color: var(--muted); }
.cb-tbl td a b, .cb-ptable td a b { white-space: nowrap; }
.cb-tbl td:first-child b { white-space: nowrap; }
.cb-count { color: var(--muted); font-size: 12px; margin-right: 10px; }
.cb-feed { list-style: none; margin: 0; padding: 0; }
.cb-feed li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line2); min-width: 0; }
.cb-feed li:last-child { border-bottom: 0; }
.cb-feed .ic { flex: 0 0 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--infoBg); color: var(--infoFg); }
.cb-feed .tone-ok .ic { background: var(--okBg); color: var(--okFg); } .cb-feed .tone-warn .ic { background: var(--warnBg); color: var(--warnFg); } .cb-feed .tone-bad .ic { background: var(--badBg); color: var(--badFg); }
.cb-feed div { min-width: 0; overflow-wrap: anywhere; }
.cb-feed .sub { display: block; font-size: 11.5px; color: var(--muted); }
.cb-meters { display: flex; flex-direction: column; gap: 12px; }
.cb-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; justify-items: center; }
.cb-mini { margin-top: 8px; }
.cb-mini td { padding: 4px 6px; font-size: 12px; }
.cb-statgrid { margin-top: 0; }
.cb-tree { list-style: none; margin: 0; padding: 0 0 0 4px; }
.cb-tree ul { list-style: none; margin: 0; padding-left: 20px; border-left: 2px solid #e3eaf1; }
.cb-tree li { padding: 4px 0; }
.cb-tree .node { display: inline-flex; gap: 8px; align-items: center; background: var(--panel2); border: 1px solid var(--line2); border-radius: 3px; padding: 4px 8px; max-width: 100%; flex-wrap: wrap; }
.cb-tree .node .sub { color: var(--muted); font-size: 11.5px; }
.cb-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.cb-steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.cb-steps li { flex: 1 1 110px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 3px; padding: 6px 8px; font-size: 12px; color: var(--muted); min-width: 0; }
.cb-steps li.done { background: var(--okBg); color: var(--okFg); border-color: #b9e6cf; }
.cb-steps li.now { background: var(--infoBg); color: var(--infoFg); border-color: #b7d4f5; font-weight: 700; }
.cb-steps li.bad { background: var(--badBg); color: var(--badFg); }
.cb-check { list-style: none; margin: 0; padding: 0; }
.cb-check li { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line2); align-items: flex-start; }
.cb-check li i { margin-top: 2px; }
.cb-check .ok i { color: var(--okFg); } .cb-check .no i { color: var(--muted); } .cb-check .bad i { color: var(--badFg); }
.cb-sandbox { display: inline-flex; align-items: center; gap: 6px; background: #fff4d6; color: #7a5600; border: 1px solid #f1d58a; border-radius: 3px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; }
.cb-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; background: #0d1b2e; color: #d6e6ff; padding: 10px 12px; border-radius: 4px; overflow: auto; max-height: 360px; white-space: pre; position: relative; }
.cb-formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
@media (max-width: 560px) {
    .cb-facts { grid-template-columns: 1fr 1fr; }
    .cb-head-id { font-size: 16px; }
}