/* ============================================================================
   DMR Bridge — components + app shell. Built on theme.css tokens only.
   ============================================================================ */

/* ── app shell ── */
.app{display:grid; grid-template-columns:250px 1fr; min-height:100vh; position:relative; z-index:1}

.sidebar{background:linear-gradient(180deg,#141619,#0f1114); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:16px 12px; position:sticky; top:0; height:100vh; overflow:auto}
.side-brand{display:flex; flex-direction:column; gap:8px; padding:6px 8px 16px}
.side-brand .logo{height:24px; width:auto; align-self:flex-start}
.side-brand .env{font-family:var(--font-mono); font-size:10px; color:var(--muted-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:2px 8px; align-self:flex-start}

.nav{flex:1; display:flex; flex-direction:column; gap:2px}
.nav-group{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:14px 10px 4px; font-weight:700}
.nav-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:var(--muted);
  font-size:13.5px; font-weight:500; cursor:pointer; text-decoration:none; position:relative;
  transition:background .15s var(--ease), color .15s var(--ease)}
.nav-item svg{width:17px; height:17px; flex:0 0 17px; opacity:.85}
.nav-item:hover{background:rgba(255,255,255,.04); color:var(--text)}
.nav-item.is-active{background:rgba(24,112,192,.14); color:#fff}
.nav-item.is-active::before{content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 2px 2px 0; background:var(--duo)}
.nav-item.is-active svg{opacity:1; color:var(--blue-300)}
.nav-item.is-soon{color:var(--muted-2); cursor:default}
.nav-item.is-soon:hover{background:transparent}
.nav-item em{margin-left:auto; font-style:normal; font-family:var(--font-mono); font-size:9px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted-2); border:1px solid var(--line); border-radius:10px; padding:1px 6px}

.side-foot{display:flex; align-items:center; gap:8px; padding:12px 8px 4px; border-top:1px solid var(--line-soft); margin-top:8px}
.side-foot .who{flex:1; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-foot .who .warnflag{color:var(--amber)}

.main{min-width:0; display:flex; flex-direction:column}
.main-top{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:22px 28px 8px}
.main-top h1{font-size:24px; margin-top:5px}
.main-top #miniStatus{font-size:12px; color:var(--muted)}
.content{padding:16px 28px 64px}

.view{display:none}
.view.is-active{display:block; animation:fade .28s var(--ease)}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.grid .full{grid-column:1/-1}
@media(max-width:1100px){ .grid{grid-template-columns:1fr} }

@media(max-width:920px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px}
  .side-brand{flex-direction:row; align-items:center; padding:6px 8px}
  .nav{flex-direction:row; flex-wrap:wrap; gap:4px}
  .nav-group{display:none}
  .nav-item.is-active::before{display:none}
  .side-foot{border-top:0; margin:0}
}

/* ── card ── */
.card{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--panel),#181b20);
  border:1px solid var(--line); border-radius:var(--r-card); padding:20px; box-shadow:var(--shadow)}
.card > .kicker{margin-bottom:16px}

/* ── status rows ── */
.stat{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft)}
.stat:last-of-type{border-bottom:0}
.stat .k{width:120px; color:var(--muted); font-size:13px}
.stat .v{flex:1; font-size:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.stat .sub{font-family:var(--font-mono); font-size:11px; color:var(--muted-2)}

/* ── pills ── */
.pill{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.02em; padding:4px 11px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--muted)}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--muted-2)}
.pill.on{color:var(--blue-300); border-color:#204364; background:rgba(24,112,192,.12)}
.pill.on .dot{background:var(--blue-400); box-shadow:0 0 8px var(--blue-400)}
.pill.off{color:var(--red-300); border-color:#5a2226; background:rgba(232,8,8,.1)}
.pill.off .dot{background:var(--red-400); box-shadow:0 0 8px var(--red-400)}
.pill.warn{color:#ffd77a; border-color:#5a4a1c; background:rgba(245,179,1,.1)}
.pill.warn .dot{background:var(--amber)}

/* ── buttons ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.01em;
  border-radius:var(--r-btn); padding:9px 16px; border:2px solid transparent; color:#fff;
  transition:transform .16s var(--ease), background-color .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--red-600)} .btn-primary:hover{background:var(--red-700); transform:translateY(-1px); box-shadow:var(--glow-red)}
.btn-blue{background:var(--blue-600)} .btn-blue:hover{background:var(--blue-700); transform:translateY(-1px); box-shadow:var(--glow-blue)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line)} .btn-ghost:hover{border-color:var(--ink-300); background:rgba(255,255,255,.04)}
.btn.sm{padding:6px 11px; font-size:12px}
.btn.wide{width:100%}

/* ── forms ── */
.flow-sub{color:var(--muted); font-size:12px; margin:0 0 8px}
label{display:block; font-size:11px; letter-spacing:.03em; text-transform:uppercase; font-weight:600; color:var(--muted); margin:0 0 4px}
input[type=text],input[type=email],input[type=password]{width:100%; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-btn); color:var(--text); padding:9px 11px; font-size:13px; font-family:var(--font-mono);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease)}
input:focus{border-color:var(--blue-500); outline:none; box-shadow:0 0 0 3px rgba(42,127,201,.18)}
input::placeholder{color:var(--muted-2)}
.row{display:flex; gap:10px; flex-wrap:wrap; margin:9px 0}
.field{flex:1; min-width:130px}
.check{display:flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; font-weight:400; text-transform:none; align-self:end}
.check input{accent-color:var(--blue-600)}

/* ── result panels ── */
.result{margin-top:12px; font-family:var(--font-mono); font-size:12px; padding:11px 13px; border-radius:var(--r-btn);
  white-space:pre-wrap; display:none; line-height:1.5}
.result.show{display:block}
.result.ok{background:rgba(24,112,192,.1); border:1px solid #204364; color:#bcd9f2}
.result.err{background:rgba(232,8,8,.09); border:1px solid #5a2226; color:#f6c3c5}

/* ── live log ── */
.controls{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.controls .sp{flex:1}
.live{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-family:var(--font-mono); color:var(--blue-300)}
.live .dot{width:7px; height:7px; border-radius:50%; background:var(--blue-400); box-shadow:0 0 8px var(--blue-400); animation:pulse 1.6s var(--ease) infinite}
.live.off{color:var(--muted-2)} .live.off .dot{background:var(--muted-2); box-shadow:none; animation:none}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.35}}

.log{background:#0c0d10; border:1px solid var(--line); border-radius:var(--r-card); overflow:auto; padding:8px}
.log-mini{height:200px} .log-tall{height:520px}
.log:empty::after{content:'Waiting for activity…'; color:var(--muted-2); font-family:var(--font-mono); font-size:12px; display:block; padding:14px}
.le{display:flex; gap:10px; align-items:baseline; padding:3px 8px; border-radius:6px; border-left:2px solid transparent; margin-bottom:1px; font-family:var(--font-mono); font-size:12px}
.le .t{color:#4b5563; flex:0 0 58px}
.le .b{flex:0 0 82px; text-transform:uppercase; font-size:9.5px; letter-spacing:.05em; font-weight:700; color:var(--muted)}
.le .m{flex:1; color:var(--text); word-break:break-word}
.le .d{color:var(--muted-2)}
.le.step{background:rgba(24,112,192,.09); border-left-color:var(--blue-500)} .le.step .b{color:var(--blue-300)}
.le.ok .b{color:var(--blue-300)}
.le.warn{border-left-color:var(--amber)} .le.warn .b{color:var(--amber)}
.le.error{background:rgba(232,8,8,.09); border-left-color:var(--red-500)} .le.error .b{color:var(--red-300)}
.le.request .b,.le.response .b{color:var(--blue-400)} .le.request .m,.le.response .m{color:var(--muted)}

/* ── diagnostics ── */
.diag{font-family:var(--font-mono); font-size:12.5px}
.diag .drow{display:flex; justify-content:space-between; gap:12px; padding:8px 2px; border-bottom:1px solid var(--line-soft)}
.diag .drow:last-child{border-bottom:0}
.diag .dk{color:var(--muted)}
.diag .dv{color:var(--text); text-align:right; word-break:break-all}
.diag .dv.ok{color:var(--blue-300)} .diag .dv.bad{color:var(--red-300)} .diag .dv.warn{color:var(--amber)}

/* ── capability explorer (novice-friendly) ── */
.lead-card{background:linear-gradient(180deg,var(--panel),#181b20); border:1px solid var(--line); border-radius:var(--r-card); padding:18px 20px; box-shadow:var(--shadow)}
.lead-card::before{content:''; display:block; height:3px; width:44px; border-radius:2px; background:var(--duo); margin-bottom:12px}
.lead-card h2{font-size:17px; margin:0 0 6px}
.lead-card p{color:var(--muted); font-size:13px; margin:0 0 10px; line-height:1.55}
.steps{list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:8px; margin:0}
.steps li{counter-increment:s; position:relative; padding-left:34px; font-size:13px; color:var(--text); line-height:1.5}
.steps li::before{content:counter(s); position:absolute; left:0; top:-1px; width:22px; height:22px; border-radius:50%;
  background:rgba(24,112,192,.14); border:1px solid #204364; color:var(--blue-300); font-family:var(--font-mono);
  font-size:11px; font-weight:700; display:grid; place-items:center}

.cap-group{margin-top:22px}
.cap-group > .kicker{display:block; margin-bottom:4px}
.cap-group .gsub{color:var(--muted); font-size:12.5px; margin:0 0 12px}

.cap{border:1px solid var(--line); border-radius:var(--r-card); padding:15px 17px; background:linear-gradient(180deg,var(--panel),#181b20); margin-bottom:12px}
.cap-head{display:flex; align-items:center; gap:10px; margin-bottom:7px; flex-wrap:wrap}
.cap-head h3{font-size:14.5px; margin:0; font-weight:700}
.cap-badge{font-family:var(--font-mono); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 8px; border-radius:10px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.cap-badge.read{color:var(--blue-300); border-color:#204364; background:rgba(24,112,192,.12)}
.cap-badge.write{color:#ffd77a; border-color:#5a4a1c; background:rgba(245,179,1,.1)}
.cap-badge.soon{color:var(--red-300); border-color:#5a2226; background:rgba(232,8,8,.08)}
.cap > p{font-size:12.5px; color:var(--muted); margin:0 0 8px; line-height:1.55}
.cap .io{display:flex; flex-direction:column; gap:3px; margin:8px 0 2px; padding:9px 11px; background:var(--panel-2); border-radius:8px; border:1px solid var(--line-soft)}
.cap .io span{font-size:12.5px; color:var(--text); display:flex; gap:7px}
.cap .io b{color:var(--muted); font-weight:600; flex:0 0 78px}
.cap.is-soon{opacity:.62}
.cap .try{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top:10px}
.cap .try .field{min-width:120px}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:12px; font-family:var(--font-mono); padding:3px 10px; border-radius:var(--r-pill);
  border:1px solid #204364; color:var(--blue-300); background:rgba(24,112,192,.08)}

.out-friendly{margin-top:11px; display:none}
.out-friendly.show{display:block}
.out-friendly .profile{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px;
  background:rgba(24,112,192,.08); border:1px solid #204364}
.out-friendly .profile .avatar{width:38px; height:38px; border-radius:50%; background:var(--duo); display:grid; place-items:center;
  color:#fff; font-family:var(--font-display); font-weight:800; font-size:15px; flex:0 0 38px}
.out-friendly .profile .who2{display:flex; flex-direction:column; gap:1px}
.out-friendly .profile .nm{font-size:14px; font-weight:700; color:var(--text)}
.out-friendly .profile .id{font-family:var(--font-mono); font-size:11px; color:var(--muted)}
.out-friendly .note{font-size:12.5px; color:var(--muted); padding:10px 12px; border-radius:8px; background:var(--panel-2); border:1px solid var(--line-soft); line-height:1.5}
.out-friendly .note.bad{color:#f6c3c5; background:rgba(232,8,8,.08); border-color:#5a2226}
.out-friendly .rows .drow{display:flex; justify-content:space-between; gap:12px; padding:8px 2px; border-bottom:1px solid var(--line-soft); font-size:13px}
.out-friendly .rows .drow:last-child{border-bottom:0}
.out-friendly .rows .dk{color:var(--text); font-weight:600} .out-friendly .rows .dv{color:var(--muted); text-align:right; max-width:60%}

/* ── readiness board ── */
.ready-score{margin-top:6px; font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--text)}
.ready-score b{color:var(--blue-300)}

.check-list{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media(max-width:800px){ .check-list{grid-template-columns:1fr} }
.check-item{display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:10px;
  border:1px solid var(--line); background:linear-gradient(180deg,var(--panel),#181b20)}
.check-item .ic{width:22px; height:22px; border-radius:50%; flex:0 0 22px; display:grid; place-items:center;
  font-size:13px; font-weight:800; font-family:var(--font-mono)}
.check-item.on .ic{background:rgba(24,112,192,.16); border:1px solid #204364; color:var(--blue-300)}
.check-item.off .ic{background:rgba(232,8,8,.12); border:1px solid #5a2226; color:var(--red-300)}
.check-item.wait .ic{background:rgba(245,179,1,.12); border:1px solid #5a4a1c; color:var(--amber)}
.check-item .ct{display:flex; flex-direction:column; gap:1px}
.check-item .ct .n{font-size:13.5px; font-weight:600; color:var(--text)}
.check-item .ct .s{font-size:11.5px; color:var(--muted)}

.flow-board{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media(max-width:900px){ .flow-board{grid-template-columns:1fr} }
.flow-card{position:relative; padding:13px 15px 13px 18px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(180deg,var(--panel),#181b20)}
.flow-card::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px}
.flow-card.green::before{background:var(--blue-500)}
.flow-card.amber::before{background:var(--amber)}
.flow-card.red::before{background:var(--red-500)}
.flow-card .fh{display:flex; align-items:center; gap:9px; margin-bottom:3px}
.flow-card .fn{font-family:var(--font-mono); font-size:11px; color:var(--muted-2); flex:0 0 auto}
.flow-card .ft{font-size:13.5px; font-weight:700; color:var(--text)}
.flow-card .ftag{margin-left:auto; font-family:var(--font-mono); font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; padding:2px 8px; border-radius:10px; border:1px solid var(--line)}
.flow-card.green .ftag{color:var(--blue-300); border-color:#204364; background:rgba(24,112,192,.12)}
.flow-card.amber .ftag{color:#ffd77a; border-color:#5a4a1c; background:rgba(245,179,1,.1)}
.flow-card.red .ftag{color:var(--red-300); border-color:#5a2226; background:rgba(232,8,8,.1)}
.flow-card .fneed{font-size:12px; color:var(--muted); line-height:1.45}

/* ── login ── */
.login{min-height:100vh; display:grid; place-items:center; position:relative; z-index:1; padding:20px}
.login .card{width:360px; padding:28px 26px}
.login .card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--duo)}
.login .logo{height:30px; margin-bottom:18px}
.login h1{font-size:19px; margin:0 0 4px}
.login .sub{color:var(--muted); font-size:13px; margin:0 0 20px}
.login input{margin-bottom:12px}
.login label{margin-bottom:4px}
.err{color:var(--red-400); font-size:13px; min-height:18px; margin:0 0 8px}

/* ── test plan (dark app surface) ── */
.tp-legend{display:flex;flex-wrap:wrap;gap:16px;margin:14px 0 6px}
.tp-key{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.tp-key b{color:var(--text);font-weight:600}
.tp-dot{width:11px;height:11px;border-radius:3px;display:inline-block}
.tp-dot.auto{background:var(--blue-400)}.tp-dot.ui{background:#8a8f98}.tp-dot.manual{background:var(--amber)}.tp-dot.blocked{background:var(--red-400)}
.tp-sum{display:flex;flex-wrap:wrap;gap:22px;margin:14px 0 4px}
.tp-sum .s{display:flex;flex-direction:column}
.tp-sum .n{font-size:24px;font-weight:700;line-height:1;color:var(--text)}
.tp-sum .c{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.tp-actions{display:flex;gap:10px;align-items:center;margin:10px 0 4px}
.tp-progress{height:6px;border-radius:6px;background:var(--ink-800);overflow:hidden;flex:1;min-width:120px}
.tp-progress>i{display:block;height:100%;background:var(--blue-400);transition:width .3s}
.tp-group{margin-top:24px}
.tp-ghead{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;border-bottom:1px solid var(--line);padding-bottom:6px}
.tp-fn{font-family:var(--font-mono,monospace);font-size:12px;color:var(--muted)}
.tp-ft{font-weight:600;font-size:15px;color:var(--text)}
.tp-fmeta{margin-left:auto;font-size:11px;color:var(--muted);font-family:var(--font-mono,monospace)}
.tp-phase{margin-left:10px;font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:20px;font-family:var(--font-mono,monospace);font-weight:700}
.tp-phase.p1{background:rgba(74,148,214,.20);color:var(--blue-300)}
.tp-phase.p2{background:rgba(245,179,1,.16);color:var(--amber)}
.tp-phase.sf{background:rgba(255,255,255,.08);color:var(--ink-300)}
.tp-phase.base{background:rgba(255,255,255,.06);color:var(--muted)}
.tp-item{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:start;padding:11px 13px;border:1px solid var(--line);border-radius:10px;margin-bottom:7px;background:linear-gradient(180deg,var(--panel),#181b20)}
.tp-item.done{opacity:.5}
.tp-item.done .lbl{text-decoration:line-through}
.tp-item .lbl{font-size:14px;line-height:1.35;color:var(--text)}
.tp-item .how{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4}
.tp-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:210px}
.tp-tag{font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:20px;white-space:nowrap;font-family:var(--font-mono,monospace);font-weight:600}
.tp-tag.auto{background:rgba(74,148,214,.20);color:var(--blue-300)}
.tp-tag.ui{background:rgba(255,255,255,.08);color:var(--ink-300)}
.tp-tag.manual{background:rgba(245,179,1,.16);color:var(--amber)}
.tp-tag.blocked{background:rgba(239,80,80,.18);color:var(--red-300)}
.tp-tag.layer{background:transparent;border:1px solid var(--line);color:var(--muted);font-weight:500}
input.tp-check{width:18px;height:18px;accent-color:var(--blue-500);cursor:pointer;margin-top:1px}
.tp-steps{margin-top:9px;display:flex;flex-direction:column;gap:6px;border-left:2px solid var(--line);padding-left:12px}
.tp-step{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--ink-200);line-height:1.4;cursor:pointer}
.tp-step input{width:14px;height:14px;accent-color:var(--blue-500);margin-top:2px;flex:none;cursor:pointer}
.tp-step.done span{text-decoration:line-through;color:var(--muted)}
#tpBoard.hide-done .tp-item.done{display:none}
/* print: force a legible light layout for the DMR hand-out */
@media print{
  .sidebar,.main-top,.tp-actions,.controls,.edge-duo{display:none!important}
  body,.app,.main,.content{background:#fff!important}
  .lead-card,.tp-item{background:#fff!important;border-color:#ddd!important;box-shadow:none!important}
  .lead-card h2,.tp-item .lbl,.tp-ft,.tp-sum .n,.tp-key b{color:#111!important}
  .lead-card p,.tp-item .how,.tp-fn,.tp-fmeta,.tp-sum .c,.tp-key,.tp-step,.tp-step span{color:#333!important}
  .tp-steps{border-left-color:#ccc!important}
  .tp-item{break-inside:avoid}
  .tp-tag.auto{background:#e3eefb!important;color:#135b9d!important}
  .tp-tag.ui{background:#eee!important;color:#444!important}
  .tp-tag.manual{background:#fdf1cf!important;color:#8a6300!important}
  .tp-tag.blocked{background:#fbe0e0!important;color:#b3121a!important}
  .tp-tag.layer{color:#555!important;border-color:#ccc!important}
}

/* ── engineers (calendar links) ── */
.eng-board{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
.eng-card{border:1px solid var(--line); border-radius:var(--r-card); padding:15px 16px; background:linear-gradient(180deg,var(--panel),#181b20); display:flex; flex-direction:column; gap:11px}
.eng-card.is-nolink{opacity:.86}
.eng-card.is-add{border-style:dashed; background:none}
.eng-card.is-add h3{font-size:13px; margin:0 0 4px; color:var(--muted)}
.eng-head{display:flex; align-items:center; gap:11px}
.eng-head h3{font-size:15px; margin:0; font-weight:700}
.eng-role{font-size:11.5px; color:var(--muted)}
.eng-dot{width:9px; height:9px; border-radius:50%; background:var(--muted-2); flex:0 0 auto}
.eng-dot.on{background:var(--blue-400); box-shadow:0 0 8px var(--blue-400)}
.eng-skills{display:flex; flex-wrap:wrap; gap:6px}
.eng-skill{font-family:var(--font-mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--blue-300); border:1px solid #204364; background:rgba(24,112,192,.12); border-radius:6px; padding:3px 7px}
.eng-skill.muted{color:var(--muted); border-color:var(--line); background:none}
.eng-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.eng-edit{display:flex; gap:8px; align-items:center; border-top:1px solid var(--line-soft); padding-top:11px}
.eng-edit.col{flex-direction:column; align-items:stretch; border-top:none; padding-top:0}
.eng-edit input{flex:1; min-width:0; background:var(--panel-2); border:1px solid var(--line-soft); border-radius:8px; padding:8px 10px; color:var(--text); font-size:12px; font-family:var(--font-mono)}
.eng-edit input:focus{outline:none; border-color:var(--blue-600)}

/* ── transfers (durable queue) ── */
.t-counts{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px}
.t-count{font-family:var(--font-mono); font-size:11.5px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:4px 11px}
.t-count b{color:var(--text); font-weight:700}
.t-count.t-failed b{color:#ffd77a} .t-count.t-dead b{color:var(--red-300)} .t-count.t-succeeded b{color:var(--blue-300)}
.t-board{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.t-row{display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:var(--r-card); padding:12px 14px; background:linear-gradient(180deg,var(--panel),#181b20)}
.t-row.t-dead{border-color:#5a2226} .t-row.t-failed{border-color:#5a4a1c} .t-row.t-succeeded{opacity:.72}
.t-pill{flex:0 0 auto; font-family:var(--font-mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:4px 9px; border-radius:6px; border:1px solid var(--line); color:var(--muted); margin-top:1px}
.t-pill.t-pending{color:var(--muted)} .t-pill.t-running{color:var(--blue-300); border-color:#204364; background:rgba(24,112,192,.12)}
.t-pill.t-failed{color:#ffd77a; border-color:#5a4a1c; background:rgba(245,179,1,.1)}
.t-pill.t-dead{color:var(--red-300); border-color:#5a2226; background:rgba(232,8,8,.1)}
.t-pill.t-succeeded{color:var(--blue-300); border-color:#204364; background:rgba(24,112,192,.1)}
.t-main{flex:1; min-width:0}
.t-title{font-size:13.5px; font-weight:600}
.t-who{color:var(--muted); font-weight:400; font-family:var(--font-mono); font-size:12px; margin-left:6px}
.t-meta{font-size:11.5px; color:var(--muted); margin-top:3px; font-family:var(--font-mono)}
.t-svc{color:var(--red-300); margin-left:6px}
.t-err{font-size:11.5px; color:var(--red-300); margin-top:6px; font-family:var(--font-mono); word-break:break-word; background:rgba(232,8,8,.06); border:1px solid #5a2226; border-radius:6px; padding:6px 9px}