/* ============================================================
   MASAR SCADA — components.css
   Cards, buttons, tables, badges, forms, KPIs, gauges, charts
   ============================================================ */

/* ---------------- card ---------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);
  display:flex;flex-direction:column;overflow:hidden;position:relative}
.card.pad{padding:16px}
.card.flat{box-shadow:none}
.card-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.card-h h3{font-size:13.5px;font-weight:650}
.card-h .sub{font-size:11px;color:var(--muted);display:block;margin-top:1px;font-weight:400}
.card-h .hx{margin-left:auto;display:flex;align-items:center;gap:7px}
.card-b{padding:16px;flex:1;min-height:0}
.card-b.tight{padding:10px}
.card-b.none{padding:0}
.card-f{padding:11px 16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;
  font-size:11.5px;color:var(--muted);flex:0 0 auto}

.sect-title{display:flex;align-items:center;gap:10px;margin:4px 0 12px}
.sect-title h2{font-size:15px}
.sect-title .line{flex:1;height:1px;background:var(--line)}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 15px;
  border-radius:10px;font-size:12.8px;font-weight:600;border:1px solid var(--line-2);
  background:var(--surface);color:var(--text);transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--dim);background:var(--surface-2);transform:translateY(-1px)}
.btn:active{transform:none}
.btn.primary{background:linear-gradient(140deg,var(--b500),var(--b600));border-color:transparent;color:#fff;
  box-shadow:0 2px 10px -2px rgba(37,99,235,.5)}
.btn.primary:hover{box-shadow:0 6px 18px -4px rgba(37,99,235,.6);filter:brightness(1.05)}
.btn.ghost{background:transparent;border-color:var(--line-2)}
.btn.soft{background:var(--b50);border-color:transparent;color:var(--b700)}
body.dark .btn.soft{background:rgba(59,130,246,.14);color:var(--b300)}
.btn.danger{background:var(--bad);border-color:transparent;color:#fff}
.btn.ok{background:var(--ok);border-color:transparent;color:#fff}
.btn.sm{height:30px;padding:0 11px;font-size:12px;border-radius:9px}
.btn.xs{height:25px;padding:0 9px;font-size:11px;border-radius:7px;gap:5px}
.btn.block{width:100%;height:42px;font-size:13.5px}
.btn[disabled]{opacity:.5;pointer-events:none}

.seg{display:inline-flex;background:var(--surface-3);border-radius:10px;padding:3px;gap:2px}
.seg button{height:28px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:600;color:var(--muted);transition:.15s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--surface);color:var(--b600);box-shadow:var(--sh-1)}
.seg.sm button{height:24px;padding:0 9px;font-size:11px}

.chip{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 11px;border-radius:100px;
  font-size:11.5px;font-weight:600;background:var(--surface-3);color:var(--muted);border:1px solid transparent;transition:.15s;cursor:pointer}
.chip:hover{background:var(--b50);color:var(--b700)}
body.dark .chip:hover{background:rgba(59,130,246,.14)}
.chip.on{background:var(--b600);color:#fff}
.chip.static{cursor:default}

/* ---------------- badges / pills ---------------- */
.pill{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:100px;
  font-size:10.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.violet{background:var(--violet-bg);color:var(--violet)}
.pill.idle{background:var(--idle-bg);color:var(--idle)}
.pill.brand{background:var(--b50);color:var(--b700)}
body.dark .pill.brand{background:rgba(59,130,246,.15);color:var(--b300)}
.pill .d{width:5px;height:5px;border-radius:50%;background:currentColor}

.dot{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:0 0 auto;display:inline-block}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}
.dot.info{background:var(--info)}.dot.idle{background:var(--idle)}.dot.violet{background:var(--violet)}
.dot.pulse{position:relative}
.dot.pulse::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:dp 1.8s ease-out infinite}
@keyframes dp{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}

/* ---------------- KPI ---------------- */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;
  box-shadow:var(--sh-2);position:relative;overflow:hidden;transition:.18s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.kpi::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--b500);opacity:.85}
.kpi.ok::after{background:var(--ok)}.kpi.warn::after{background:var(--warn)}
.kpi.bad::after{background:var(--bad)}.kpi.violet::after{background:var(--violet)}
.kpi .k-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.kpi .k-lb{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.kpi .k-ic{margin-left:auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--b50);color:var(--b600)}
body.dark .kpi .k-ic{background:rgba(59,130,246,.14)}
.kpi .k-v{font-size:26px;font-weight:700;color:var(--ink);font-family:var(--mono);letter-spacing:-1.4px;line-height:1}
.kpi .k-v small{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0;margin-left:3px}
.kpi .k-d{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:var(--muted)}
.kpi .k-d b{font-size:11px;font-weight:700}
.kpi .k-d b.up{color:var(--ok)}.kpi .k-d b.dn{color:var(--bad)}
.kpi .k-spark{position:absolute;right:0;bottom:0;opacity:.5;pointer-events:none}

/* ---------------- table ---------------- */
.tbl-wrap{overflow:auto;border-radius:var(--r-sm)}
table.tbl{font-size:12.5px;min-width:100%}
table.tbl thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);text-align:left;
  padding:9px 12px;font-size:10.5px;font-weight:700;letter-spacing:.6px;color:var(--muted);
  text-transform:uppercase;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
table.tbl thead th:hover{color:var(--ink)}
table.tbl thead th .so{opacity:.4;margin-left:3px;font-size:9px}
table.tbl thead th.on .so{opacity:1;color:var(--b600)}
table.tbl tbody td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tbody tr{transition:background .12s}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl tbody tr.click{cursor:pointer}
table.tbl tbody tr.sel{background:var(--b50)}
body.dark table.tbl tbody tr.sel{background:rgba(59,130,246,.12)}
table.tbl td .id{font-family:var(--mono);font-weight:600;color:var(--ink);font-size:12px}
table.tbl .r{text-align:right}
.tbl-empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:12.5px}
.tbl-empty .e-ic{display:grid;place-items:center;margin:0 auto 10px;width:44px;height:44px;
  border-radius:14px;background:var(--surface-3);color:var(--dim)}

.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.toolbar .grow{flex:1}
.srch{position:relative;min-width:200px}
.srch input{width:100%;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  padding:0 12px 0 31px;font-size:12.5px;outline:none;transition:.15s}
.srch input:focus{border-color:var(--b400);box-shadow:var(--ring)}
.srch .i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:14px}

/* ---------------- forms ---------------- */
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fld > span{font-size:11.5px;font-weight:600;color:var(--muted)}
.fld input,.fld select,.fld textarea{
  height:38px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);
  padding:0 12px;font-size:13px;outline:none;transition:.15s;width:100%;color:var(--text)}
.fld textarea{height:auto;min-height:84px;padding:10px 12px;resize:vertical;line-height:1.6}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--b400);box-shadow:var(--ring)}
.fld.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.fld-grid.c3{grid-template-columns:repeat(3,1fr)}
.hint{font-size:11px;color:var(--dim)}

.switch{display:flex;align-items:center;gap:10px;cursor:pointer;padding:9px 0}
.switch input{display:none}
.switch .sw{width:38px;height:22px;border-radius:100px;background:var(--line-2);position:relative;transition:.2s;flex:0 0 auto}
.switch .sw::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:var(--sh-1);transition:.2s}
.switch input:checked + .sw{background:var(--b600)}
.switch input:checked + .sw::after{transform:translateX(16px)}
.switch .sl{display:flex;flex-direction:column;line-height:1.35}
.switch .sl b{font-size:12.5px}
.switch .sl span{font-size:11px;color:var(--muted)}

/* ---------------- progress / meters ---------------- */
.bar{height:6px;border-radius:100px;background:var(--surface-3);overflow:hidden;position:relative}
.bar i{display:block;height:100%;border-radius:100px;background:var(--b500);transition:width .4s cubic-bezier(.4,0,.2,1)}
.bar i.ok{background:var(--ok)}.bar i.warn{background:var(--warn)}.bar i.bad{background:var(--bad)}
.bar.lg{height:9px}
.bar.grad i{background:linear-gradient(90deg,var(--b400),var(--b600))}

.meter{display:flex;flex-direction:column;gap:5px}
.meter .m-t{display:flex;align-items:baseline;font-size:11.5px;color:var(--muted)}
.meter .m-t b{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink)}

/* ---------------- gauge ---------------- */
.gauge{position:relative;display:grid;place-items:center}
.gauge .g-v{position:absolute;text-align:center;line-height:1.1}
.gauge .g-v b{font-family:var(--mono);font-weight:700;color:var(--ink);letter-spacing:-1px}
.gauge .g-v span{display:block;font-size:9.5px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-top:2px}

/* ---------------- timeline ---------------- */
.tl{position:relative;padding-left:22px}
.tl::before{content:'';position:absolute;left:6px;top:5px;bottom:5px;width:2px;background:var(--line);border-radius:2px}
.tl-i{position:relative;padding:0 0 15px 0}
.tl-i::before{content:'';position:absolute;left:-20px;top:4px;width:10px;height:10px;border-radius:50%;
  background:var(--surface);border:2.4px solid var(--b500);z-index:1}
.tl-i.ok::before{border-color:var(--ok)}.tl-i.warn::before{border-color:var(--warn)}
.tl-i.bad::before{border-color:var(--bad)}.tl-i.idle::before{border-color:var(--dim)}
.tl-i .t-h{display:flex;align-items:center;gap:8px;font-size:12.5px}
.tl-i .t-h b{font-weight:600}
.tl-i .t-t{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.tl-i .t-d{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.55}

/* ---------------- log / event feed ---------------- */
.feed{display:flex;flex-direction:column;gap:1px;font-size:12px}
.feed-i{display:flex;gap:9px;padding:7px 9px;border-radius:8px;transition:.12s;align-items:flex-start}
.feed-i:hover{background:var(--surface-2)}
.feed-i .f-t{font-family:var(--mono);font-size:10.5px;color:var(--dim);flex:0 0 52px;padding-top:1px}
.feed-i .f-x{flex:1;line-height:1.5;min-width:0}
.feed-i .f-x b{font-family:var(--mono);font-size:11.5px}
.feed-i .f-d{flex:0 0 auto;margin-top:5px}

/* ---------------- misc ---------------- */
.divider{height:1px;background:var(--line);margin:14px 0}
.kv{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;font-size:12.5px;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)}
.kv b{font-weight:600;font-family:var(--mono);font-size:12.5px}
.stat-row{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.stat-row > div{flex:1;padding:11px 13px;border-right:1px solid var(--line)}
.stat-row > div:last-child{border-right:0}
.stat-row .s-l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.stat-row .s-v{font-size:17px;font-weight:700;font-family:var(--mono);color:var(--ink);margin-top:3px;letter-spacing:-.8px}

.avatar{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:700;
  color:#fff;background:linear-gradient(140deg,var(--b400),var(--b600));flex:0 0 auto}
.avatar.sm{width:24px;height:24px;border-radius:7px;font-size:9.5px}
.avatar.lg{width:44px;height:44px;border-radius:13px;font-size:15px}

.skel{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);
  background-size:200% 100%;animation:sk 1.4s linear infinite;border-radius:6px}
@keyframes sk{to{background-position:-200% 0}}

.scroll-y{overflow-y:auto;overflow-x:hidden}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 20px;color:var(--muted);font-size:12.5px;text-align:center}
.empty .e-ic{width:44px;height:44px;border-radius:14px;background:var(--surface-3);display:grid;place-items:center;font-size:20px;color:var(--dim)}

.tag{display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;font-size:10px;
  font-weight:700;letter-spacing:.3px;background:var(--surface-3);color:var(--muted);font-family:var(--mono)}

.split-h{display:flex;gap:16px}
.split-h > *{min-width:0}

/* charts */
.chart{width:100%;display:block;overflow:visible}
.chart .grid-l{stroke:var(--line);stroke-width:1}
.chart .axis-t{fill:var(--dim);font-size:9.5px;font-family:var(--mono)}
.chart .ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .pt{stroke:var(--surface);stroke-width:2}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;font-size:11px;color:var(--muted)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}

/* ---------------- keyboard accessibility ---------------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--b500);outline-offset:2px;border-radius:7px}
.btn:focus-visible,.icon-btn:focus-visible,.chip:focus-visible,.seg button:focus-visible,
.nav-item:focus-visible,.maptools button:focus-visible{outline:none;box-shadow:var(--ring),var(--sh-1)}
.vrow:focus-visible,.tkc:focus-visible,table.tbl tbody tr:focus-visible{outline:2px solid var(--b500);outline-offset:-2px}
.skip-link{position:fixed;left:-999px;top:8px;z-index:400;background:var(--b600);color:#fff;
  padding:9px 16px;border-radius:9px;font-size:13px;font-weight:600}
.skip-link:focus{left:8px}

/* ---------------- print ---------------- */
@media print{
  .side,.top,.hud,.chatdock,.chatfab,.drawer,.inspector,.toasts,.modal-wrap,
  .page-head .ph-x,.toolbar,.rp-tabs{display:none !important}
  #app{display:block;height:auto}
  main{position:static;overflow:visible}
  .page{position:static;padding:0;overflow:visible;animation:none}
  body{background:#fff;overflow:visible}
  .card{break-inside:avoid;box-shadow:none;border-color:#ccc}
  .kpi{break-inside:avoid;box-shadow:none;border-color:#ccc}
  table.tbl thead th{background:#f2f2f2 !important;color:#000}
  a[href]:after{content:''}
  @page{margin:14mm}
}

/* ============================================================
   ICON SET — one family, one weight

   Every glyph in the product comes from U.icon() (Lucide, embedded in
   js/core/util.js). The rules below make an icon behave the same
   wherever it lands: inside a button, a search field, a table header,
   an avatar. Nothing here sets a size — the call site does — so an
   icon never fights the type around it.
   ============================================================ */
.icon-btn svg, .side-collapse svg, .spd button svg, .chatfab svg,
.ts-ic svg, .e-ic svg, .m-av svg, .orb svg, .seg button svg{display:block}

/* icons sitting inline with text: optically centred against the cap height */
.btn svg{vertical-align:-.16em;flex:0 0 auto}
.btn{display:inline-flex;align-items:center;gap:6px;justify-content:center}

/* sortable table headers — the arrow is an icon, not a text arrow */
table.tbl thead th .so{display:inline-flex;vertical-align:-.18em;margin-left:4px;opacity:.42}
table.tbl thead th.on .so{opacity:1;color:var(--b600)}

/* KPI delta */
.kpi .k-d b{display:inline-flex;align-items:center;gap:2px}
.kpi .k-d b svg{width:12px;height:12px}

/* assistant avatar / orb */
.m-av svg, .orb svg, .chatfab svg{stroke-width:2}

/* ---------------- checkbox ----------------
   A real input kept accessible but hidden, with a drawn box beside it,
   so selection works with the keyboard and screen readers as well as
   the mouse. */
.chk{display:inline-grid;place-items:center;width:18px;height:18px;cursor:pointer;flex:0 0 auto}
.chk input{position:absolute;opacity:0;width:18px;height:18px;margin:0;cursor:pointer}
.chk span{width:15px;height:15px;border-radius:4.5px;border:1.6px solid var(--line-2);
  background:var(--surface);display:grid;place-items:center;transition:.12s}
.chk input:checked + span{background:var(--b600);border-color:var(--b600)}
.chk input:checked + span::after{content:'';width:8px;height:4.5px;border:2px solid #fff;
  border-top:0;border-right:0;transform:rotate(-45deg) translate(.5px,-1px)}
.chk input:focus-visible + span{box-shadow:var(--ring);border-color:var(--b500)}
.chk:hover span{border-color:var(--b400)}

/* ---------------- key/value grid + inline note ---------------- */
.kv-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.kv-grid .kv{border-bottom:1px dashed var(--line)}
.kv-grid .kv span{color:var(--muted)}
@media(max-width:640px){ .kv-grid{grid-template-columns:1fr} }

.note{font-size:12px;line-height:1.65;padding:10px 12px;border-radius:9px;
  background:var(--surface-3);color:var(--text);border-left:3px solid var(--line-2)}
.note b{color:var(--ink)}
.note.warn{background:var(--warn-bg);border-left-color:var(--warn)}
.note.bad{background:var(--bad-bg);border-left-color:var(--bad)}

/* ============================================================
   v4 — COMMUNICATION PANEL
   ============================================================ */
.cm-wrap{display:flex;flex-direction:column;gap:0;margin:-4px -2px}
.cm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:12px}
.cm-tabs{display:flex;gap:2px;background:var(--surface-3);border-radius:9px;padding:2.5px}
.cm-tab{display:flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:7px;
  font-size:11.5px;font-weight:600;color:var(--muted);transition:.13s}
.cm-tab:hover{color:var(--ink)}
.cm-tab.on{background:var(--surface);color:var(--b600);box-shadow:var(--sh-1)}
.cm-link{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text);white-space:nowrap}
.cm-link i{font-size:10.5px;color:var(--muted);font-style:normal;unicode-bidi:plaintext}

.cm-pane{display:flex;flex-direction:column;gap:11px}
.cm-lead{font-size:11.5px;line-height:1.7;color:var(--muted)}
.cm-call{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:11px}
.cm-call-x{flex:1;display:flex;flex-direction:column;gap:2px}
.cm-call-x b{font-size:13.5px;color:var(--ink)}
.cm-num{font-size:12.5px;color:var(--b600)}
.cm-call-x i{font-size:10.5px;color:var(--muted);font-style:normal}
.cm-ptt{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.cm-ptt-i{padding:9px 11px;border:1px solid var(--line);border-radius:9px;display:flex;flex-direction:column;gap:2px}
.cm-ptt-i span{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cm-ptt-i b{font:700 12.5px/1 var(--mono);color:var(--ink)}
.cm-ptt-live{display:flex;align-items:center;gap:7px;justify-content:center;font-size:11.5px;
  font-weight:600;color:var(--bad)}
.cm-quick{display:flex;flex-wrap:wrap;gap:5px}
.cm-cmds{display:flex;flex-direction:column;gap:5px}
.cm-cmd{display:grid;grid-template-columns:minmax(0,1fr) 16px;align-items:center;gap:10px;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  text-align:left;transition:.13s}
.cm-cmd:hover{border-color:var(--b600);background:var(--b50)}
body.dark .cm-cmd:hover{background:rgba(37,99,235,.14)}
.cm-cmd b{display:block;font-size:12.5px;color:var(--ink)}
.cm-cmd span{font-size:11px;color:var(--muted)}
.cm-cmd svg{color:var(--dim)}
.cm-ctx{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  background:var(--b50);border:1px solid var(--b200)}
body.dark .cm-ctx{background:rgba(37,99,235,.14);border-color:#1d4ed8}
.cm-ctx b{font:700 12px/1 var(--mono);color:var(--ink)}
.cm-ctx span{flex:1;font-size:11.5px;color:var(--text);unicode-bidi:plaintext}
.cm-jobs{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:220px;overflow:auto}
.cm-job{display:flex;flex-direction:column;gap:1px;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;text-align:left;transition:.12s}
.cm-job:hover{border-color:var(--b600);background:var(--b50)}
body.dark .cm-job:hover{background:rgba(37,99,235,.14)}
.cm-job b{font:700 11.5px/1 var(--mono);color:var(--ink)}
.cm-job span{font-size:11.5px;color:var(--text)}
.cm-job i{font-size:10.5px;color:var(--muted);font-style:normal;unicode-bidi:plaintext}

.cm-log{margin-top:14px;border-top:1px solid var(--line);padding-top:11px}
.cm-log-t{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  margin-bottom:7px;display:flex;gap:6px;align-items:baseline}
.cm-log-t i{font-family:var(--mono);font-style:normal;text-transform:none;letter-spacing:0}
.cm-log-b{max-height:210px;overflow:auto}
.cm-le{display:grid;grid-template-columns:24px minmax(0,1fr) 92px;gap:9px;align-items:start;
  padding:8px 2px;border-bottom:1px solid var(--line)}
.cm-le-ic{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--muted)}
.cm-le-x b{display:block;font-size:11.5px;font-weight:600;color:var(--text);line-height:1.5;unicode-bidi:plaintext}
.cm-le-x i{font-size:10.5px;color:var(--muted);font-style:normal;unicode-bidi:plaintext}
.cm-le-x em{display:block;font-size:10.5px;font-style:normal;color:var(--warn);margin-top:2px}
.cm-le-o{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  text-align:right;padding-top:2px}
.cm-le-o.ok{color:var(--ok)} .cm-le-o.bad{color:var(--bad)} .cm-le-o.info{color:var(--info)}
.commbar{display:flex;flex-wrap:wrap;gap:4px}

@media (max-width:800px){ .cm-jobs{grid-template-columns:1fr} .cm-ptt{grid-template-columns:1fr} }