/* ============================================================
 * canon.css — skin do console Canon Aquilion Lightning
 * Aproximação didática do visual real (uso em treinamento).
 * Namespace .cn-* para não colidir com o curso.
 * ============================================================ */

/* hotspots clicáveis sobre a silhueta do paciente (registro) */
/* losango da legenda de protocolo (Default/User/Service) */
.cn-diamond { width: 9px; height: 9px; border: 1.5px solid #8a99b0; transform: rotate(45deg); display: inline-block; flex: none; }
.cn-diamond.fill { background: #e8c020; border-color: #e8c020; }

/* botões laterais Whole / Chest-Pelvis (recriados limpos) */
.cn-minibtn { cursor: pointer; text-align: center; }
.cn-minibox {
  border: none; border-radius: 4px; background: transparent;
  padding: 2px; display: flex; align-items: center; justify-content: center;
}
.cn-minibox img { width: 100%; height: auto; display: block; }
.cn-minibtn:hover { filter: brightness(1.12); }
/* seleção pinta só a imagem/silhueta, não o label abaixo */
.cn-minibtn.sel img { background: #454a68; border-radius: 4px; }
.cn-minilbl { font-size: 9px; color: #b8c4e0; margin-top: 2px; line-height: 1.05; }

/* aba de grupo (A/B/C) desabilitada = sem protocolos naquele grupo */
.cn-grouptabs .cn-tabx.disabled { cursor: default; pointer-events: none; }

/* quadrados sempre visíveis (azul translúcido) + amarelo ao selecionar, igual ao console */
.cn-reghot { position: absolute; cursor: pointer; border: 1px solid rgba(150,170,220,.55); background: rgba(140,150,200,.14); border-radius: 2px; transition: background .1s; }
.cn-reghot:hover { background: rgba(232,226,38,0.18); border-color: rgba(232,226,38,.7); }
.cn-reghot.sel { background: rgba(232,226,38,0.12); border: 2px solid #e8e226; box-shadow: 0 0 6px rgba(232,226,38,.7); }

.cn-root {
  --cn-bg: #14171c;
  --cn-panel-top: #3c4046;
  --cn-panel-bot: #23262b;
  --cn-bevel-lt: #5a5e64;
  --cn-bevel-dk: #0c0e11;
  --cn-text: #c9cdd2;
  --cn-dim: #8a9098;
  --cn-teal: #57d6c4;
  --cn-cyan: #62b8d8;
  --cn-gold: #e0a828;
  --cn-yellow: #e8e226;
  --cn-field: #000;
  --cn-line: #3a3f46;
  --cn-blue-btn-top: #3d6ea8;
  --cn-blue-btn-bot: #23425f;

  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 12px;
  color: var(--cn-text);
  background: linear-gradient(180deg, #1a1e24, #0d0f12);
  border: 1px solid #000;
  border-radius: 4px;
  overflow: hidden;
  user-select: none;
  display: grid;
  grid-template-columns: 156px 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "side main" "side bottom";
  min-height: 560px;
}

/* ---------- botões Canon (bevel) ---------- */
.cn-btn {
  background: linear-gradient(180deg, var(--cn-panel-top), var(--cn-panel-bot));
  border: 1px solid var(--cn-bevel-dk);
  border-top-color: var(--cn-bevel-lt);
  border-left-color: #4a4e54;
  border-radius: 4px;
  color: var(--cn-text);
  font-size: 11px;
  padding: 5px 8px;
  cursor: pointer;
  text-align: center;
  line-height: 1.15;
}
.cn-btn:hover { background: linear-gradient(180deg, #474b52, #2a2e33); }
.cn-btn:active { background: linear-gradient(180deg, #23262b, #3c4046); }
.cn-btn.sel, .cn-btn.active { color: var(--cn-gold); border-color: var(--cn-gold); }
.cn-btn.blue {
  background: linear-gradient(180deg, var(--cn-blue-btn-top), var(--cn-blue-btn-bot));
  border-top-color: #5b8fc9; color: #fff; font-weight: 600;
}
.cn-btn.blue:hover { filter: brightness(1.15); }
.cn-btn.wide { display: block; width: 100%; }
.cn-btn:disabled { opacity: .4; cursor: not-allowed; }
.cn-ico { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; }
.cn-ico .g { font-size: 18px; line-height: 1; }

/* ============ SIDEBAR ESQUERDA ============ */
.cn-side {
  grid-area: side;
  background: linear-gradient(180deg, #1c2026, #101318);
  border-right: 1px solid #000;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.cn-title { display: flex; justify-content: space-between; align-items: baseline; }
.cn-title b { font-style: italic; color: var(--cn-teal); font-size: 15px; font-weight: 700; }
.cn-title span { font-size: 9px; color: var(--cn-dim); }
.cn-volimg {
  background: var(--cn-field); border: 1px solid var(--cn-teal); border-radius: 3px;
  color: var(--cn-teal); font-size: 10px; padding: 2px 5px; text-align: center;
}
.cn-counter {
  display: flex; align-items: center; gap: 4px; font-size: 9px; color: var(--cn-dim);
}
.cn-counter .box { flex: 1; background: var(--cn-field); border: 1px solid var(--cn-line); color: var(--cn-teal); text-align: center; border-radius: 2px; padding: 1px; }

/* medidor do tubo */
.cn-tube {
  background: linear-gradient(180deg, #2a2e33, #1a1d21);
  border: 1px solid var(--cn-bevel-dk); border-top-color: var(--cn-bevel-lt);
  border-radius: 4px; padding: 5px 6px; font-size: 9px;
}
.cn-tube .lbl { color: var(--cn-dim); display: flex; justify-content: space-between; }
.cn-tube .lbl b { color: var(--cn-cyan); }
.cn-tube .gauge { height: 8px; background: #000; border: 1px solid var(--cn-line); border-radius: 3px; margin-top: 3px; overflow: hidden; }
.cn-tube .gauge > i { display: block; height: 100%; background: linear-gradient(90deg, #2f6ea8, #57b8e0); }

.cn-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.cn-utility { text-align: center; color: var(--cn-dim); font-size: 11px; padding: 4px; background: linear-gradient(180deg, #2a2e33, #1a1d21); border: 1px solid var(--cn-bevel-dk); border-top-color: var(--cn-bevel-lt); border-radius: 4px; }
.cn-sep { height: 1px; background: var(--cn-line); margin: 2px 0; }
.cn-tools { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.cn-side-block { display: flex; flex-direction: column; gap: 5px; }
.cn-mini-select { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--cn-dim); }
.cn-mini-select select { background: var(--cn-field); color: var(--cn-teal); border: 1px solid var(--cn-line); font-size: 10px; padding: 2px; border-radius: 2px; }

/* ============ MAIN ============ */
.cn-main { grid-area: main; position: relative; overflow: auto; padding: 8px; }
.cn-screen { display: none; height: 100%; }
.cn-screen.active { display: block; }

/* ---------- registro ---------- */
.cn-reg { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.cn-form { display: flex; flex-direction: column; gap: 4px; }
.cn-frow { display: grid; grid-template-columns: 92px 1fr; gap: 6px; align-items: center; }
.cn-flabel {
  background: linear-gradient(180deg, #3a5b7a, #26425c); color: #dfeaf2;
  border-radius: 12px; padding: 4px 10px; font-size: 11px; text-align: center;
  border: 1px solid #12222f; border-top-color: #4f79a0;
}
.cn-field-in { background: var(--cn-field); border: 1px solid var(--cn-line); color: var(--cn-teal); padding: 4px 6px; font-size: 11px; border-radius: 2px; width: 100%; }
.cn-field-in:focus { outline: none; border-color: var(--cn-teal); }
/* selects do form de registro = botao dropdown biselado (quadrado escuro + triangulo) igual console */
[data-el="reg-form"] select, .cn-selbev {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: #000 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24'%3E%3Crect width='22' height='24' fill='%232c3644'/%3E%3Crect width='2' height='24' fill='%23070a0e'/%3E%3Crect width='22' height='2' fill='%23566880'/%3E%3Crect y='22' width='22' height='2' fill='%2310161e'/%3E%3Cpath d='M6.5 8.5 L15.5 8.5 L11 16 Z' fill='%23d6dee8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  padding-right: 28px !important;
  border: 1px solid #2a3140 !important;
  border-radius: 3px !important;
}
[data-el="reg-form"] select:focus, .cn-selbev:focus { outline: none; border-color: #4f79a0 !important; }
[data-el="reg-form"] select::-ms-expand, .cn-selbev::-ms-expand { display: none; }
.cn-selbev { color: #cdd6de; font-size: 9px !important; padding: 0 20px 0 5px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-form-btns { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }

.cn-reg-right { display: flex; flex-direction: column; gap: 8px; }
.cn-preview { background: #000; border: 1px solid var(--cn-line); border-radius: 3px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: #333; font-size: 11px; }

/* seletor de região corporal + protocolos */
.cn-bodysel { display: grid; grid-template-columns: 88px 1fr; gap: 8px; }
.cn-bodytabs { display: flex; gap: 3px; grid-column: 1 / -1; }
.cn-bodytabs .cn-btn { flex: 1; font-size: 10px; padding: 3px; }
.cn-body {
  position: relative; background: linear-gradient(180deg, #1a1e24, #0d0f12);
  border: 1px solid var(--cn-line); border-radius: 4px; padding: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cn-body svg { width: 100%; height: auto; }
.cn-body .region { fill: rgba(90,120,160,.25); stroke: rgba(120,160,200,.5); cursor: pointer; }
.cn-body .region:hover { fill: rgba(120,170,220,.45); }
.cn-body .region.sel { fill: rgba(224,168,40,.5); stroke: var(--cn-gold); }

.cn-protogroups { display: flex; flex-direction: column; }
.cn-grouptabs { display: flex; gap: 2px; }
.cn-grouptabs .cn-btn { flex: 1; font-size: 10px; padding: 3px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cn-protolist {
  border: 1px solid var(--cn-line); border-radius: 0 0 4px 4px; background: #0c0f13;
  max-height: 260px; overflow-y: auto;
}
.cn-proto {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; cursor: pointer;
  border-bottom: 1px solid #191d22; font-size: 11px;
}
.cn-proto:hover { background: #1a2028; }
.cn-proto.sel { background: #24303c; }
.cn-proto .th { width: 26px; height: 26px; background: #000; border: 1px solid var(--cn-line); border-radius: 2px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.cn-proto .nm { flex: 1; }
.cn-proto .no { color: var(--cn-dim); font-size: 10px; }

/* ---------- registro 900x720 (design importado do Claude Design) ---------- */
.cn-root.on-reg { grid-template-columns: 0 1fr; }
.cn-root.on-reg .cn-side, .cn-root.on-reg .cn-bottom { display: none; }
.cn-root.on-reg .cn-main { padding: 0; overflow: hidden; }
/* Proteção contra a montagem inicial exibir o shell antigo ao lado das telas
   Canon completas. A própria tela ativa passa a determinar o layout. */
.cn-root:has(.cn-screen.active .cn-fixed) { grid-template-columns: 0 1fr; }
.cn-root:has(.cn-screen.active .cn-fixed) > .cn-side,
.cn-root:has(.cn-screen.active .cn-fixed) > .cn-bottom { display: none; }
.cn-root:has(.cn-screen.active .cn-fixed) > .cn-main { padding: 0; overflow: hidden; }

.cn-fixwrap { width: 100%; overflow: hidden; }
.cn-fixed {
  position: relative; width: 900px; height: 720px;
  background: #2d3139; color: #c8c8c8; font-size: 11px;
  overflow: hidden; user-select: none; transform-origin: top left;
  font-family: Arial, "Helvetica Neue", sans-serif;
}
.cn-fixed * { box-sizing: border-box; }
.cn-fixed input, .cn-fixed select { font-family: inherit; }
.cn-fixed input:focus, .cn-fixed select:focus { outline: 1px solid #3a6a8a; }

.cn-hot:hover { filter: brightness(1.25); }
/* hotspot transparente sobre painel-imagem: ferramenta ativa ganha contorno amarelo */
.cn-hot.sel { /* sem destaque visual — o console real não marca a ferramenta ativa */ }

/* clique "afunda" o botão (feedback físico, como no console real) */
.cn-hot:active { background: rgba(0,0,0,.30); box-shadow: inset 0 1px 5px rgba(0,0,0,.65); border-radius: 4px; }
.cn-hot:active > img { filter: brightness(.8); transform: translateY(1px); }
.cn-btn:active, .cn-btn-gray:active, .cn-bt-btn:active, .cn-wl-btn:active,
.cn-avnav:active, .cn-home-btn:active, .cn-home-card:active, .cn-protorow:active,
.cn-bt-close:active { transform: translateY(1px); filter: brightness(.82); }

.cn-lbl {
  width: 78px; box-sizing: border-box; text-align: right; padding: 5px 2px 5px 10px;
  border-radius: 14px 2px 2px 14px;
  background: linear-gradient(180deg, #6a8098, #4c6072);
  border: 1px solid #d5dde4;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.25), inset 0 -2px 4px rgba(0,0,0,.35);
  color: #fff; font-weight: bold; font-size: 11px; flex: none;
}
/* botoes de acao da home (Appoint/Exposure/Detail/Clear/Emergency): borda cinza clara 1px */
.cn-reg-actions .cn-btn-gray { border: 1px solid #9aa1a9; }
/* fields do registro com a MESMA altura dos labels (24px) */
[data-el="reg-form"] input, [data-el="reg-form"] select { height: 24px; box-sizing: border-box; }
/* inputs de texto do form: fundo preto, sem arredondamento (selects ficam com
   o botao biselado da regra .cn-selbev) */
[data-el="reg-form"] input { background: #000 !important; border-radius: 0 !important; }
/* Organ = select fundo chumbo, letra branca (mantem o botao biselado) */
[data-el="reg-form"] select.cn-organ-sel { background-color: #000 !important; border: 1px solid #2a3140; border-radius: 4px; color: #cdd !important; font-size: 11px !important; padding: 4px 8px; }
/* Organ tem seta custom (p-organ-arrow); esconde a seta nativa do datalist */
[data-el="p-organ"]::-webkit-calendar-picker-indicator { display: none !important; }
.cn-lbl.dim { background: #364450; color: #d3dbe3; }

.cn-btn-gray {
  text-align: center; padding: 6px 0; border-radius: 5px;
  background: linear-gradient(180deg, #4a4d50, #25282b);
  border: 1px solid #000; color: #cde; font-size: 10px; cursor: pointer;
  font-family: inherit;
}
.cn-btn-gray:hover { background: linear-gradient(180deg, #5a5d60, #303336); }
.cn-btn-gray:active { background: linear-gradient(180deg, #25282b, #4a4d50); }

.cn-tabx {
  flex: 1; text-align: center; padding: 4px 0; font-size: 11px; color: #9ab;
  background: linear-gradient(180deg, #24282b, #141618);
  border: 1px solid #8a9099; border-radius: 2px 2px 0 0; cursor: pointer;
}
/* tabs coladas: sem gap, borda compartilhada entre vizinhas */
.cn-bodytab + .cn-tabx, .cn-grouptabs .cn-tabx + .cn-tabx { border-left: none; }
.cn-tabx.sel { color: #dfe; background: linear-gradient(180deg, #3a4247, #20262b); }

/* ===== APPLICATION (Autoview): tabs 1/2/3 + grade 5x3 ===== */
.cn-apptabs { display: flex; align-items: flex-end; gap: 3px; }
.cn-apptab { flex: none; width: 26px; text-align: center; font-size: 11px; color: #aeb8c2; padding: 3px 0; background: linear-gradient(180deg, #363c46, #23272e); border: 1px solid #0a0c10; border-bottom: none; border-radius: 6px 6px 0 0; cursor: pointer; }
.cn-apptab.wide { flex: 1; color: #cdd6de; }
.cn-apptab.sel { color: #dff; background: linear-gradient(180deg, #454c57, #2b303a); }
/* Autoview e MPR: abas de pasta coladas (sem vão), alinhadas à esquerda, como no console */
[data-screen="viewer"] .cn-apptabs, [data-screen="mpr"] .cn-apptabs { gap: 0; justify-content: flex-start; }
[data-screen="viewer"] .cn-apptab, [data-screen="mpr"] .cn-apptab { border-radius: 4px 4px 0 0; }
[data-screen="viewer"] .cn-apptab + .cn-apptab, [data-screen="mpr"] .cn-apptab + .cn-apptab { border-left: none; }
/* abas do Scan Sequence tambem coladas (sem vao e sem borda dupla) */
[data-screen="scan"] .cn-apptab + .cn-apptab { border-left: none; }
.cn-appcell { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; cursor: pointer; overflow: visible; }
.cn-appcell img { height: 66%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); transition: transform .13s ease, filter .13s ease; }
.cn-appcell span { margin-top: 1px; font-size: 8px; line-height: 1.05; color: #46c6e6; text-shadow: 0 1px 2px #000; text-align: center; }
.cn-appcell:hover img { transform: translateY(-3px); filter: drop-shadow(0 4px 5px rgba(0,0,0,.55)) brightness(1.1); }
.cn-appcell:active img { transform: translateY(-1px); }
/* Reconstrução: cada controle usa seu próprio recorte seguro do painel de referência. */
.cn-recon-fixed {
  background: radial-gradient(circle at 76% 26%, #343741 0%, #2b2e38 38%, #242731 68%, #171a22 100%);
}
.cn-recon-tile,
.cn-recon-tool {
  justify-content: center;
  border-radius: 2px;
}
.cn-recon-tile { overflow: hidden; }
.cn-recon-tool { justify-content: flex-start; overflow: visible; }
.cn-recon-tile img,
.cn-image-button img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: none;
}
.cn-recon-tile:hover img,
.cn-image-button:hover img { transform: none; filter: brightness(1.1); }
.cn-recon-tile:active img,
.cn-image-button:active img { transform: translateY(1px); filter: brightness(.92); }
.cn-appcell.cn-recon-tile.sel { outline: none; box-shadow: none; }
.cn-mode-tabs {
  position: absolute;
  left: 6px;
  width: 160px;
  height: 41px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 40px;
  gap: 0;
  z-index: 4;
  box-sizing: border-box;
  background: transparent;
}
/* 4 campos .cn-fld2 (25px) empurram as abas ~20px pra baixo no viewer/mpr */
/* stack Aquilion→cine + gap; espaço acima das abas MPR/3D/Clinical */
.cn-mode-tabs-directory { top: 109px; }
.cn-mode-tabs-viewer { top: 85px; }
.cn-mode-tabs-mpr { top: 85px; }
/* linha 2: Scan / Autoview-s / Raw-Data — botões do cliente em div própria abaixo das tabs */
.cn-modebtns {
  position: absolute;
  left: 2px;
  width: 168px;
  height: 46px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100%;
  gap: 3px;
  z-index: 4;
}
/* tiles novos sao quadrados: conter na linha de 46px pro label nao invadir a Utility */
.cn-modebtns .cn-modecell { overflow: hidden; }
.cn-modebtns .cn-modecell img { height: 100%; }
/* label DENTRO do botao (base interna do tile), como no console real */
.cn-modebtns .cn-modecell span { bottom: 12%; font-size: 7.5px; }
[data-screen="studies"] .cn-modebtns { top: 155px; }
[data-screen="viewer"] .cn-modebtns { top: 131px; }
[data-screen="mpr"] .cn-modebtns { top: 131px; }
[data-screen="v3d"] .cn-modebtns { top: 131px; }
.cn-modebtns .cn-modecell { position: relative; }
.cn-modecell.sel { outline: none; }
.cn-modecell.sel span { color: #e8e226; }
/* ===== Tabs MPR/3D/Clinical — design do cliente (bevel + mesa + filete amarelo) ===== */
.cn-mode-tabs { overflow: visible; }
.cn-vtab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 3px 2px 7px; margin: 0; border: 0; cursor: pointer; z-index: 1;
  background: linear-gradient(180deg, #5b5f62 0%, #34383b 42%, #171a1d 78%, #171b1e 100%);
  border-right: 2px solid #15181b; border-radius: 0;
  box-shadow: inset 0 2px 2px rgba(255,255,255,.24), inset 0 -2px 4px rgba(0,0,0,.65);
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
  box-sizing: border-box; overflow: visible;
}
.cn-vtab:first-child { border-radius: 6px 0 0 0; }
.cn-vtab:nth-child(3) { border-right: 0; border-radius: 0 6px 0 0; }
.cn-vtab:hover { filter: brightness(1.06); }
.cn-vtab:active { transform: translateY(1px); }
.cn-vtab img {
  height: 19px; width: auto; max-width: 84%; object-fit: contain;
  user-select: none; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.62));
}
.cn-vtab span {
  font-size: 9.5px; line-height: 1; font-weight: 700; letter-spacing: -.2px; color: #f4f4f4;
  text-shadow: 0 2px 1px #000, 1px 0 1px rgba(255,255,255,.42); user-select: none;
}
.cn-vtab.sel {
  z-index: 3;
  box-shadow: inset 0 2px 2px rgba(255,255,255,.34), inset 3px 0 0 #d6cd27;
}
/* footer "mesa": barra na base da linha 1, mais larga que o bloco */
.cn-mode-tabs::before {
  content: "";
  position: absolute;
  left: -4px; width: calc(100% + 8px);
  top: 33px; height: 8px; z-index: 2;
  background: linear-gradient(180deg, #181c1f 0%, #0e1113 100%);
  border: 1px solid rgba(255,255,255,.22); border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  pointer-events: none;
}
/* aba ativa "desce" até a mesa */
.cn-vtab.sel::before {
  content: "";
  position: absolute; left: 0; right: 0;
  bottom: -1px; height: 8px; z-index: 2;
  background: linear-gradient(180deg, #171b1e 0%, #101417 100%);
  pointer-events: none;
}

.cn-mode-tabs .cn-mode-tab {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.cn-mode-tabs .cn-mode-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.cn-mode-tabs .cn-mode-tab.sel::after {
  border-left: 2px solid #d8d01b;
  border-bottom: 2px solid #d8d01b;
  border-radius: 7px 0 0 2px;
  box-shadow: inset 1px 0 rgba(255,250,85,.35), inset 0 -1px rgba(255,250,85,.28);
}
.cn-mode-tabs .cn-mode-tab > span {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 2px;
  z-index: 3;
  margin: 0;
  color: #f1f3f5;
  font-size: 8px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 1px #000, 0 0 2px #000;
  pointer-events: none;
}
.cn-recon-tool.sel { outline: 2px solid #e8e226; outline-offset: -2px; border-radius: 4px; }
.cn-appcell.cn-recon-tool img {
  width: auto;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
.cn-appcell.cn-recon-tool span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  z-index: 2;
  margin: 0;
  padding: 0 2px;
  box-sizing: border-box;
  color: #eef2f5;
  font-size: 8px;
  line-height: .95;
  text-align: center;
  text-shadow: 0 1px 2px #000, 0 0 2px #000;
}
.cn-appcell.cn-recon-tool:hover img { transform: translateY(-2px); filter: drop-shadow(0 3px 4px rgba(0,0,0,.65)) brightness(1.08); }
.cn-appcell.cn-recon-tool:active img { transform: translateY(0); filter: brightness(.92); }
.cn-image-button { padding: 0; gap: 0; overflow: hidden; background: transparent; border: 0; box-shadow: none; }
.cn-wide-control,
.cn-directory-tile { position: absolute; }
.cn-wide-control > span,
.cn-directory-tile > span {
  position: absolute;
  z-index: 3;
  margin: 0;
  color: #eef1f4;
  text-shadow: 0 1px 1px #000, 0 0 2px #000;
  pointer-events: none;
}
.cn-wide-control > span {
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
}
.cn-appbar.cn-wide-control > span { left: 42%; }
.cn-directory-wide > span { left: 34%; font-size: 8px; }
.cn-directory-tile > span {
  left: 0;
  right: 0;
  bottom: 3px;
  font-size: 9px;
  line-height: 1;
  text-align: center;
}
.cn-nav-control { position: absolute; }
.cn-nav-control > span {
  position: absolute;
  left: 4px;
  top: 2px;
  z-index: 3;
  margin: 0;
  color: #f0f2f4;
  font-size: 7px;
  line-height: 1;
  text-shadow: 0 1px 1px #000, 0 0 2px #000;
  pointer-events: none;
}
.cn-recon-fixed .cn-ov {
  color: #eef1f4;
  font-size: 14px;
  line-height: 1.14;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.cn-recon-fixed [data-el="view-frame"] canvas {
  transform-origin: 50% 50%;
  transition: transform .16s ease, filter .16s ease;
}
/* ===== MPR: painel inteiro reconstruído em controles independentes ===== */
.cn-mpr-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 180px;
  height: 720px;
  overflow: hidden;
  background: linear-gradient(180deg,#2b2d35 0%,#242630 45%,#17191f 100%);
  border-right: 1px solid #000;
}
.cn-mpr-head {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 4px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  color: #dfe6ea;
  font-size: 9px;
  background: none;
  border: none;
  box-sizing: border-box;
}
.cn-mpr-head span:first-child {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .2px;
  text-shadow: 0 1px 1px #000;
}
.cn-mpr-controls { position:absolute; left:4px; right:4px; top:26px; height:690px; }
.cn-appcell.cn-mpr-launch { justify-content:center; overflow:hidden; border-radius:2px; }
.cn-appcell.cn-mpr-launch img { width:100%; height:100%; object-fit:fill; filter:none; }
.cn-appcell.cn-mpr-launch:hover img { transform:none; filter:brightness(1.08); }
.cn-mpr-layout { overflow:hidden; cursor:pointer; }
.cn-mpr-layout:hover { filter:brightness(1.08); }
.cn-mpr-projectbox {
  display:grid;
  grid-template-columns:46% 54%;
  grid-template-rows:1fr 1fr;
  align-items:center;
  gap:4px 2px;
  padding:7px 5px;
  background:linear-gradient(180deg,#41444b,#2c2f36);
  border:1px solid #111318;
  border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.cn-mpr-projectbox label { color:#eef2f5; font-size:9px; text-align:right; padding-right:2px; }
.cn-mpr-projectbox select {
  width:100%; height:19px; padding:0 2px;
  color:#fff; font-size:10px;
  background:linear-gradient(180deg,#34383e,#17191d);
  border:1px solid #08090b; border-radius:3px;
}
.cn-mpr-sidebtn {
  position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  cursor:pointer; color:#eef2f5; font-size:8px; line-height:1; text-align:center;
}
/* as artes (mprapp-*-v4) já trazem o anel cinza claro e são círculos perfeitos;
   o CSS só acende o anel amarelo quando a ferramenta está ativa */
.cn-mpr-sidebtn img {
  width:28px; height:28px; object-fit:contain; border-radius:50%;
  filter:drop-shadow(0 1px 2px #000);
}
.cn-mpr-sidebtn span { margin-top:1px; color:#eef2f5; text-shadow:0 1px 2px #000; }
.cn-mpr-sidebtn:hover img { filter:brightness(1.12) drop-shadow(0 2px 3px #000); transform:translateY(-1px); }
.cn-mpr-sidebtn.on img { box-shadow:0 0 0 2px #e8e226, 0 0 7px rgba(232,226,38,.8); }
.cn-mpr-sidebtn.on span { color:#e8e226; }
.cn-appcell.cn-mpr-app-tool {
  justify-content:flex-start;
  overflow:hidden;
  box-sizing:border-box;
}
.cn-appcell.cn-mpr-app-tool img {
  width:auto; height:78%; object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.75));
}
.cn-appcell.cn-mpr-app-tool span {
  position:absolute; left:0; right:0; bottom:22%; z-index:2; width:100%; max-width:100%; margin:0;
  padding:0 2px; box-sizing:border-box;
  background:transparent;
  border-radius:0;
  color:#eef2f5; font-size:8px; line-height:1; text-align:center;
  text-shadow:0 1px 2px #000,0 0 2px #000; white-space:normal; overflow:visible;
}
.cn-appcell.cn-mpr-app-tool:hover img { transform:translateY(-2px); filter:brightness(1.08) drop-shadow(0 3px 4px rgba(0,0,0,.7)); }
.cn-appcell.cn-mpr-app-tool.sel { outline:none; border-radius:0; box-shadow:none; }
.cn-appcell.cn-mpr-app-tool.sel span { color:#eef2f5; }
/* ===== TOPO Autoview recriado (completa a grade da outra sessao) ===== */
.cn-appcell.sel { outline: 2px solid #e8e226; outline-offset: -2px; border-radius: 4px; box-shadow: 0 0 6px rgba(232,226,38,.55); }
.cn-appcell.sel span { color: #e8e226; }
/* Utility barra (icone + label lado a lado) */
.cn-appbar { position: absolute; display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; background: linear-gradient(180deg, #333b45, #232a33); border: 1px solid #3d4653; border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.cn-appbar img { height: 74%; object-fit: contain; }
.cn-appbar span { font-size: 11px; color: #cdd6de; text-shadow: 0 1px 2px #000; }
.cn-appbar:hover { filter: brightness(1.08); }
.cn-appbar:active { filter: brightness(.92); }
/* botao generico do painel (Auto Load) */
.cn-vbtn { position: absolute; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; color: #dfe6ee; background: linear-gradient(180deg, #3a414c, #252b34); border: 1px solid #0a0d12; border-top-color: #5a626e; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); text-shadow: 0 1px 2px #000; }
.cn-vbtn:hover { filter: brightness(1.1); }
.cn-vbtn:active { filter: brightness(.9); }
/* Directory = botao horizontal biselado (tile das pessoas + label) */
.cn-dirbtn { position: absolute; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 3px; padding: 0 4px 0 2px; cursor: pointer; background: linear-gradient(180deg, #454b55, #2b303a); border: 1px solid #0a0d12; border-top-color: #5a626e; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); overflow: hidden; }
/* botão de controle 100% código (Directory / Auto Load do console): bevel cinza c/ relevo */
.cn-ctlbtn { position: absolute; display: flex; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; background: linear-gradient(180deg, #4a505a 0%, #363c46 45%, #262b33 100%);
  border: 1px solid #0a0d12; border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.5); }
.cn-ctlbtn img { height: 58%; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.cn-ctlbtn span { color: #eef2f6; font-size: 9px; font-weight: 600; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.cn-ctlbtn:hover { filter: brightness(1.1); }
.cn-ctlbtn:active { filter: brightness(.88); transform: translateY(1px); }
/* Utility: barra larga, texto + ícone de ferramentas à direita (como o console) */
.cn-utilbtn { gap: 7px; border-radius: 2px; }
.cn-utilbtn img { height: 62%; }
.cn-utilbtn span { font-size: 10px; letter-spacing: .3px; }
.cn-dirbtn img { height: 62%; width: auto; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); flex: none; }
.cn-dirbtn span { font-size: 8px; color: #dfe6ee; text-shadow: 0 1px 1px #000; white-space: nowrap; }
.cn-dirbtn:hover { filter: brightness(1.1); }
.cn-dirbtn:active { filter: brightness(.9); }
/* botoes Bwd./Fwd. = label em cima + icone embaixo */
.cn-navbtn { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; background: linear-gradient(180deg, #2e343d, #1c2129); border: 1px solid #0a0d12; border-top-color: #454b55; border-radius: 4px; }
.cn-navbtn b { font-size: 9px; font-weight: 600; color: #aeb8c2; text-shadow: 0 1px 1px #000; line-height: 1; }
.cn-navbtn img { height: 14px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.cn-navbtn:hover { filter: brightness(1.15); }
.cn-navbtn:hover b { color: #dff; }
.cn-navbtn:active { filter: brightness(.9); }
/* Os botões de reconstrução já contêm moldura, ícone e texto no asset. */
.cn-appbar.cn-image-button,
.cn-dirbtn.cn-image-button,
.cn-navbtn.cn-image-button {
  padding: 0;
  gap: 0;
  overflow: hidden;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.cn-appbar.cn-image-button img,
.cn-dirbtn.cn-image-button img,
.cn-navbtn.cn-image-button img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: none;
}
/* caixa de preview "A" */
.cn-abox { position: absolute; background: #000; border: 1px solid #2a3140; border-radius: 3px; display: flex; align-items: center; justify-content: center; cursor: context-menu; }
.cn-abox span { color: #46c6e6; font-size: 13px; }

/* ===== PAINEL ESQUERDO 100% CSS (registro) ===== */
.cn-lpanel { background: transparent; border: none; border-left: 1px solid #000; border-right: 1px solid #000; border-radius: 0; overflow: visible; font-family: Tahoma, Verdana, sans-serif; }
/* O mesmo cabecalho do console em todos os sidebars completos. A camada e
   somente visual: os hotspots originais continuam recebendo os cliques. */
/* topo do painel 100% nativo: campos .cn-lp-fld com icones SVG (ico-*.svg) */
.cn-lp-head {
  position: absolute; left: 2%; top: 2px; width: 96%; height: 20px;
  background: linear-gradient(180deg, #7a7d83, #0b0c0e);
  border: 1px solid #67676a; border-radius: 3px;
  display: flex; align-items: center; box-sizing: border-box; padding: 0 6px;
}
.cn-lp-head b { color: #fff; font-style: italic; font-weight: 700; font-size: 14px; margin-left: 8px; letter-spacing: .3px; text-shadow: 0 1px 1px #000; }
/* título Aquilion: mesma borda + degradê do Vol/Img (.cn-fld2) */
.cn-aq-title {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #7a7d83, #0b0c0e) !important;
  border: 1px solid #67676a;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 0 6px;
}
.cn-lp-date { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: #cdd6de; font-size: 10px; font-style: normal; }
/* data no header Aquilion (studies/viewer/mpr) */
.cn-aq-title [data-el$="-date"],
.cn-mpr-head [data-el="mpr-date"] { color: #cdd6de; font-size: 10px; font-style: normal; }
/* altura fixa: em % cada tela tem um container diferente e o campo saia torto */
.cn-lp-fld { position: absolute; height: 17px; box-sizing: border-box; background: #05080d; border: 1px solid #37455a; border-radius: 5px; display: flex; align-items: center; overflow: hidden; padding: 0 4px; gap: 3px; }
/* campo v2: moldura em degrade cinza->preto com visor preto interno (console real) */
.cn-fld2 { position: absolute; height: 25px; display: flex; align-items: stretch; gap: 2px; padding: 2px; background: linear-gradient(180deg, #7a7d83, #0b0c0e); border: 1px solid #67676a; border-radius: 3px; overflow: hidden; box-sizing: border-box; }
.cn-fld2 .ic { width: 28px; display: flex; align-items: center; justify-content: flex-start; padding-left: 2px; flex: none; }
.cn-fld2 .ic img { height: 15px; display: block; }
/* impressora / filmagem / atualizar série: um pouco menores */
.cn-fld2.sm-ico .ic img { height: 13px; }
.cn-fld2 .tx { flex: 1; background: #000; border-radius: 2px; display: flex; align-items: center; justify-content: flex-start; padding-left: 2px; overflow: hidden; }
.cn-fld2 .tx span { color: #4fc9ec; font-size: 11px; font-weight: 600; white-space: nowrap; }
/* contadores curtos (impressora/filme): número à direita do visor */
.cn-fld2 .tx.n { justify-content: flex-end; padding-right: 6px; padding-left: 0; }
/* cine/refresh: número centrado */
.cn-fld2 .tx.c { justify-content: center; padding-left: 0; }
.cn-lp-fld img { height: 80%; object-fit: contain; flex: none; }
.cn-lp-fld .v { color: #4fc9ec; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cn-lp-fld .v.n { flex: 1; text-align: right; padding-right: 6px; }
.cn-lp-box { position: absolute; background: linear-gradient(180deg, #10161e, #080c11); border: 1px solid #37455a; border-radius: 5px; overflow: hidden; }
/* dose */
.cn-dose-top { position: absolute; left: 8%; top: 8%; color: #eef2f6; font-size: 13px; }
.cn-dose-slot { position: absolute; left: 6%; top: 46%; width: 66%; height: 12%; background: linear-gradient(180deg, #4a4f57, #2a2e35); border: 1px solid #12151a; border-radius: 2px; }
.cn-dose-slot > i { position: absolute; top: -30%; width: 8%; height: 160%; background: linear-gradient(180deg, #c9ced6, #7d838d); border: 1px solid #000; border-radius: 1px; }
.cn-dose-bot { position: absolute; left: 8%; bottom: 8%; color: #eef2f6; font-size: 13px; }
.cn-dose-vbar { position: absolute; right: 5%; top: 10%; width: 26%; height: 80%; background: linear-gradient(180deg, #3a3f47, #22262c); border: 1px solid #12151a; border-radius: 2px; display: flex; align-items: center; justify-content: center; color: #eef2f6; font-size: 11px; }
.cn-dose-vbar b { font-weight: 400; }
/* tube */
.cn-tube-row { position: absolute; left: 6%; top: 8%; display: flex; align-items: center; gap: 4px; color: #eef2f6; font-size: 12px; }
.cn-tube-row img { height: 16px; object-fit: contain; }
.cn-tube-pct { position: absolute; left: 30%; top: 40%; color: #4fc9ec; font-size: 15px; font-weight: 600; }
.cn-tube-gauge { position: absolute; left: 6%; bottom: 10%; width: 88%; height: 13%; background: #1a1f26; border: 1px solid #0a0d11; border-radius: 2px; overflow: hidden; }
.cn-tube-gauge > i { display: block; height: 100%; background: linear-gradient(180deg, #4fc0ec, #2a86c4); }

.cn-icocell { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; cursor: pointer; overflow: visible; }
.cn-icocell img { height: 74%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); transition: transform .13s ease, filter .13s ease; }
.cn-icocell span { margin-top: 1px; font-size: 7px; line-height: 1; color: #e7eef2; text-shadow: 0 1px 2px #000; white-space: nowrap; transition: transform .13s ease; }
.cn-icocell:hover img { transform: translateY(-3px); filter: drop-shadow(0 4px 5px rgba(0,0,0,.55)) brightness(1.08); }
.cn-icocell:hover span { transform: translateY(-2px); }
.cn-icocell:active img { transform: translateY(-1px); }
/* Utility = barra inteira do cliente (imagem com texto embutido) */
.cn-icobtn { position: absolute; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cn-icobtn img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); transition: filter .13s ease; }
.cn-icobtn:hover img { filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)) brightness(1.08); }
.cn-icobtn:active img { filter: brightness(.92); }
/* Scan / Autoview-s / Raw-Data = botao do cliente com label dentro do rodape */
.cn-modecell { position: absolute; cursor: pointer; }
/* tile justo (150x130) preenche o botao; ratio ~igual ao da celula, distorcao <2% */
.cn-modecell img { width: 100%; height: 100%; object-fit: fill; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); transition: filter .13s ease, transform .13s ease; }
.cn-modecell span { position: absolute; left: 0; right: 0; bottom: 7%; text-align: center; font-size: 8px; line-height: 1; color: #e7eef2; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; pointer-events: none; }
.cn-modecell:hover img { filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)) brightness(1.08); }
.cn-modecell:active img { transform: translateY(1px); }

.cn-regionbox { border: 1px solid #6a6a90; background: rgba(140,140,180,.10); cursor: pointer; }
.cn-regionbox:hover { background: rgba(140,140,180,.25); }
.cn-regionbox.sel { border-color: #b8a030; background: rgba(220,200,60,.22); }

.cn-protorow {
  display: flex; align-items: center; gap: 8px;
  background: #4d4f5a;
  border: 1px solid #8a9099; border-radius: 2px; padding: 5px 8px; height: 36px; cursor: pointer;
}
/* linhas coladas: borda compartilhada entre vizinhas na coluna */
.cn-protorow + .cn-protorow { border-top: none; }
.cn-protorow:hover { background: #5a5d69; }
/* selecionado: mesma cor de fundo, so engrossa a borda (box-shadow inset = sem deslocar) */
.cn-protorow.sel { background: #4d4f5a; box-shadow: inset 0 0 0 2px #8a9099; position: relative; z-index: 1; }
.cn-protorow .th { width: 26px; height: 26px; background: #0a0b0c; border: 1px solid #445; border-radius: 3px; flex: none; overflow: hidden; }
.cn-protorow .nm { flex: 1; font-size: 11px; color: #0e1114; line-height: 1.1; }
.cn-protorow .no { font-size: 11px; color: #0e1114; }
.cn-protorow .su { font-size: 10px; color: #23262b; width: 40px; text-align: right; }
.cn-protorow .lz { font-size: 11px; color: #0e1114; width: 10px; text-align: center; }
.cn-protoempty { background: linear-gradient(180deg, #26292c, #161819); border: 1px solid #000; border-radius: 4px; height: 36px; }

/* ---------- exames realizados (worklist) ---------- */
/* Ícones desativados escurecem sem nenhuma placa retangular por trás. */
.cn-appcell.cn-dir-tool { transition: opacity .18s; background: transparent; }
.cn-appcell.cn-dir-tool img { width: auto; height: 78%; object-fit: contain; background: transparent; }
.cn-appcell.cn-dir-tool span {
  left: 5%; right: 5%; bottom: 20%; z-index: 2;
  padding: 4px 1px 1px; line-height: .92;
  background: none;
  text-shadow: 0 1px 3px #000, 0 0 4px #000;
}
.cn-appcell.cn-dir-tool.is-disabled { opacity: .34; pointer-events: none; cursor: default; }
.cn-dir-range.disabled { opacity: .48; }
.cn-dir-database {
  position: relative; width: 16px; height: 13px; flex: none;
  border: 1px solid #70767b; border-radius: 50% / 22%;
  background: linear-gradient(90deg,#45494c,#aaa 45%,#5a5e61);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.35);
}
.cn-dir-database::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: 3px; height: 4px;
  border-top: 1px solid #b7bbbe; border-bottom: 1px solid #313538; border-radius: 50%;
}
.cn-dir-refresh {
  width: 24px; height: 24px; border: 1px solid #111; border-top-color: #687078;
  border-radius: 3px; display: flex; align-items: center; justify-content: center;
  color: #e4e7ea; background: linear-gradient(180deg,#454a50,#24282c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12); cursor: pointer; font-size: 19px;
}
.cn-dir-fold {
  width: 16px; height: 16px; padding: 0; border: 1px solid #111; border-radius: 50%;
  color: #dfe3e6; background: linear-gradient(180deg,#34393f,#171a1e); cursor: pointer;
  font-size: 9px; line-height: 14px; vertical-align: middle;
}

.cn-directory { background: #414250; }
.cn-dir-workspace {
  background: linear-gradient(180deg,#444553 0%,#3f404e 100%);
  border-left: 1px solid #20212a;
}
.cn-dir-hostbar { flex: 0 0 25px; min-height: 25px; }
.cn-dir-hostselect { flex: 0 0 230px !important; width: 230px; max-width: 230px !important; height: 25px; }
.cn-dir-noimage { color: #8b8c91; font-size: 11px; letter-spacing: 1px; text-shadow: 0 1px 1px #000; }
.cn-dir-section-head {
  flex: 0 0 20px; min-height: 20px; padding: 1px 1px 0;
  border-top: 1px solid #5b5c69; border-bottom: 1px solid #292a35;
  background: linear-gradient(180deg,rgba(83,84,100,.5),rgba(54,55,68,.22));
  text-shadow: 0 1px 1px #17171d;
}
.cn-dir-study-head { flex-basis: 18px; min-height: 18px; }
.cn-dir-image-head { flex-basis: 24px; min-height: 24px; align-items: center !important; }
.cn-dir-list {
  overflow: scroll !important;
  border-color: #20212a #626371 #626371 #20212a !important;
  background: repeating-linear-gradient(180deg,#080912 0 12px,#11101d 12px 24px) !important;
  scrollbar-color: #777783 #171821;
  scrollbar-width: auto;
}
.cn-dir-study-list { margin-bottom: 2px !important; }
.cn-dir-series-list { margin-bottom: 6px !important; }
.cn-dir-list::-webkit-scrollbar { width: 12px; height: 12px; }
.cn-dir-list::-webkit-scrollbar-track { background: #171821; border: 1px solid #090a0f; }
.cn-dir-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#858590,#666671); border: 1px solid #292a32; }
.cn-dir-list::-webkit-scrollbar-corner { background: #171821; }
.cn-dir-table { table-layout: fixed; font-size: 10px !important; line-height: 11px; }
.cn-dir-table thead { z-index: 2; }
.cn-dir-table th {
  height: 15px; padding: 1px 4px !important; line-height: 12px;
  overflow: hidden; white-space: nowrap; text-overflow: clip;
  border-color: #1a1b24 #595a68 #1a1b24 #282934 !important;
  color: #d6d7dc; background: linear-gradient(180deg,#42434f,#292a36);
  text-shadow: 0 1px 1px #000;
}
.cn-dir-table tbody tr:nth-child(odd) td { background: #080912; }
.cn-dir-table tbody tr:nth-child(even) td { background: #11101d; }
.cn-dir-actions { flex: 0 0 28px; min-height: 28px; }

.cn-strow td { height: 12px; padding: 0 4px; line-height: 11px; border: 1px solid #171722; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.cn-strow { cursor: pointer; }
.cn-strow:hover td { background: #1a2028; }
.cn-strow.sel td { background: linear-gradient(180deg, #9aa700, #7f9000) !important; color: #f4f4df !important; }
.cn-ic-round { width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 45% 35%, #4a5560, #181c20); border: 1px solid #000; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.cn-wpreset.sel { color: #e8d060; background: linear-gradient(180deg, #3a4247, #20262b); border-color: #b8a030; }

.cn-nonload td { color: #7b8894 !important; }

/* ---------- scanplan 900x720 ---------- */
.cn-tab2 {
  padding: 5px 16px; font-size: 11px; color: #9ab; cursor: pointer;
  background: linear-gradient(180deg, #24282b, #141618);
  border: 1px solid #000; border-bottom: none; border-radius: 5px 5px 0 0;
}
.cn-tab2.active { color: #6fd6e8; background: linear-gradient(180deg, #1c3038, #12242c); border-color: #2a4a5a; }
.cn-fixed .kv { display: flex; justify-content: space-between; padding: 4px 2px; font-size: 11px; color: #9ab; border-bottom: 1px solid #171b20; }
.cn-fixed .kv b { color: #dfe; }
[data-el="scout-ap"], [data-el="scout-lat"] { cursor: grab; }

.cn-sp-round {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}
.cn-sp-round img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cn-sp-status-btn {
  position: relative;
  width: 58px;
  height: 30px;
  flex: 0 0 58px;
  cursor: pointer;
}
.cn-sp-status-btn img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}
.cn-sp-status-btn span {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 31px;
  color: #d7d9dd;
  font-size: 7px;
  line-height: .95;
  text-align: left;
  text-shadow: 0 1px 1px #000, 0 0 2px #000;
  pointer-events: none;
}
.cn-sp-status-btn.is-disabled { opacity: .5; }
/* desabilitado na home: icone cinza chumbo, sem clique */
.cn-sp-status-btn.is-off { filter: grayscale(1) brightness(.55); opacity: .65; pointer-events: none; cursor: default; }

/* ---------- registro fiel à print (reg2) ---------- */
.cn-reg2 { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.cn-reg2-top { display: grid; grid-template-columns: 1.45fr 1fr; gap: 10px; }
.cn-form2 { display: flex; flex-direction: column; gap: 4px; }
.cn-form2 .cn-frow { display: grid; grid-template-columns: 96px 1fr auto; gap: 6px; align-items: center; }
.cn-frow2 { display: grid; grid-template-columns: 96px 1fr 70px 1fr; gap: 6px; align-items: center; }
.cn-flabel small { display: block; font-size: 8px; opacity: .8; margin-top: 1px; }
.cn-flabel.alt { background: linear-gradient(180deg, #2f4a63, #1e3448); }
.cn-field-in.sm { min-width: 0; }
.cn-info { font-size: 10px; padding: 4px 10px; }
.cn-form-btns2 { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.cn-form-btns2 .cn-btn { flex: 1; font-size: 10px; padding: 6px 4px; }
.cn-emerg { color: #ff8a8a; border-color: #7a2a2a; }
.cn-emerg:hover { background: linear-gradient(180deg, #5a2323, #3a1616); }

.cn-reg2-right { display: flex; flex-direction: column; gap: 6px; }
.cn-preview { position: relative; }
.cn-preview > span { color: #333; font-size: 11px; }
.cn-prev-ov { position: absolute; inset: 0; pointer-events: none; font-family: Consolas, monospace; font-size: 9px; color: #9fd4a3; }
.cn-prev-ov span { position: absolute; text-shadow: 0 0 3px #000; }
.cn-prev-ov .tl { top: 4px; left: 6px; color: #d8c24a; } .cn-prev-ov .tr { top: 4px; right: 6px; text-align: right; }
.cn-prev-ov .bl { bottom: 4px; left: 6px; color: #cfd6da; font-family: Tahoma; } .cn-prev-ov .br { bottom: 4px; right: 6px; text-align: right; }
.cn-protolegend { display: flex; justify-content: flex-end; gap: 12px; font-size: 10px; color: var(--cn-dim); }
.cn-protolegend .user { color: var(--cn-gold); }

.cn-reg2-bottom { display: grid; grid-template-columns: 258px 1fr; gap: 10px; flex: 1; min-height: 0; }
.cn-bodysel2 { display: flex; flex-direction: column; gap: 4px; }
.cn-bodysel2-inner { display: grid; grid-template-columns: 54px 1fr; gap: 6px; background: linear-gradient(180deg, #1a1e24, #0d0f12); border: 1px solid var(--cn-line); border-radius: 4px; padding: 6px; flex: 1; }
.cn-bodymini { display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; }
.cn-bodymini .mini { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; color: var(--cn-dim); text-align: center; }
.cn-bodymini .mini svg { width: 34px; height: auto; }
.cn-bodysel2 .cn-body { display: flex; align-items: center; justify-content: center; }
.cn-bodysel2 .cn-body svg { max-height: 240px; width: auto; }

.cn-protogroups2 { display: flex; flex-direction: column; min-height: 0; }
.cn-protolist2 { flex: 1; overflow-y: auto; border: 1px solid var(--cn-line); border-radius: 0 0 4px 4px; background: #0c0f13; display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-content: start; }
.cn-proto2 { display: flex; align-items: center; gap: 7px; padding: 7px 8px; cursor: pointer; border-bottom: 1px solid #191d22; border-right: 1px solid #191d22; font-size: 10px; }
.cn-proto2:hover { background: #1a2028; }
.cn-proto2.sel { background: #24303c; }
.cn-proto2 .th { width: 24px; height: 24px; background: #000; border: 1px solid var(--cn-line); border-radius: 2px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.cn-proto2 .nm { flex: 1; line-height: 1.2; }
.cn-proto2 .no { color: var(--cn-dim); font-size: 9px; white-space: nowrap; }

/* ---------- scanplan ---------- */
.cn-scanplan { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.cn-scouts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cn-scout-frame { position: relative; background: #000; border: 1px solid var(--cn-line); border-radius: 3px; overflow: hidden; }
.cn-scout-frame canvas { display: block; width: 100%; height: auto; }
.cn-scout-frame .wl { position: absolute; bottom: 4px; left: 5px; font-size: 9px; color: var(--cn-teal); }
.cn-scout-frame .lbl { position: absolute; font-size: 11px; color: #ddd; font-weight: 700; }

.cn-plan-lower { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8px; }
.cn-seqtable { border: 1px solid var(--cn-line); border-radius: 3px; overflow: hidden; font-size: 10px; }
.cn-seqtable table { width: 100%; border-collapse: collapse; }
.cn-seqtable th { background: #1a2028; color: var(--cn-teal); font-weight: normal; padding: 3px 4px; border-bottom: 1px solid var(--cn-line); font-size: 9px; }
.cn-seqtable td { padding: 3px 4px; border-bottom: 1px solid #171b20; text-align: center; }
.cn-seqtable tr.sel td { background: #24303c; }

.cn-tabs { display: flex; gap: 2px; }
.cn-tab { flex: 1; padding: 4px; font-size: 10px; text-align: center; background: linear-gradient(180deg, #2a2e33, #1a1d21); border: 1px solid var(--cn-bevel-dk); border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; color: var(--cn-dim); }
.cn-tab.active { color: var(--cn-gold); background: linear-gradient(180deg, #3c4046, #23262b); }
.cn-tabpane { border: 1px solid var(--cn-line); border-radius: 0 0 4px 4px; padding: 8px; font-size: 11px; background: #0f1216; min-height: 90px; }
.cn-tabpane .kv { display: flex; justify-content: space-between; padding: 2px 0; color: var(--cn-dim); }
.cn-tabpane .kv b { color: var(--cn-text); }

/* ---------- viewer / autoview ---------- */
.cn-view-wrap { position: relative; height: 100%; min-height: 420px; background: #000; border: 1px solid var(--cn-line); border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.cn-view-wrap canvas { display: block; max-width: 100%; max-height: 100%; }
.cn-ov { position: absolute; font-size: 10px; color: #9fd4a3; font-family: Consolas, monospace; white-space: pre-line; text-shadow: 0 0 4px #000; pointer-events: none; }
.cn-ov.tl { top: 6px; left: 8px; } .cn-ov.tr { top: 6px; right: 8px; text-align: right; }
.cn-ov.bl { bottom: 6px; left: 8px; } .cn-ov.br { bottom: 6px; right: 8px; text-align: right; }
.cn-ov.brand { bottom: 6px; left: 8px; color: #cfd6da; font-family: Tahoma; }

/* ---------- MPR 4 quadrantes ---------- */
.cn-mpr { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 100%; min-height: 460px; }
.cn-quad { position: relative; background: #000; border: 1px solid #222; overflow: hidden; }
.cn-quad.active { border-color: var(--cn-yellow); }
.cn-quad canvas { display: block; width: 100%; height: 100%; }
.cn-quad .tag { position: absolute; top: 4px; left: 6px; font-size: 10px; color: var(--cn-teal); font-family: Consolas, monospace; pointer-events: none; }
.cn-quad .wl { position: absolute; bottom: 4px; left: 6px; font-size: 9px; color: #e8eef2; font-family: Consolas, monospace; pointer-events: none; white-space: pre; line-height: 1.3; }
.cn-quad .brand { position: absolute; bottom: 4px; right: 6px; font-size: 9px; color: #cfd6da; pointer-events: none; }
/* elementos por quadrante (letras de orientação, régua, marcador e cubo 3D) */
.cn-qside { position: absolute; top: 50%; left: 6px; transform: translateY(-50%); color: #e8eef2; font-size: 11px; font-family: Consolas, monospace; pointer-events: none; }
.cn-qfoot { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); color: #e8eef2; font-size: 10px; font-family: Consolas, monospace; pointer-events: none; }
.cn-qhour { position: absolute; top: 38%; left: 4px; font-size: 13px; line-height: 1; pointer-events: none; }
.cn-qruler { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 9px; height: 64px; pointer-events: none;
  background: repeating-linear-gradient(180deg, #cfd6da 0 1px, transparent 1px 9px); border-right: 1px solid #cfd6da; }
.cn-qcube { position: absolute; right: 5px; bottom: 4px; pointer-events: none; }

/* ============ BOTTOM BAR ============ */
.cn-bottom {
  grid-area: bottom;
  display: flex; align-items: stretch; gap: 0;
  background: linear-gradient(180deg, #23262b, #13161a);
  border-top: 1px solid #000; padding: 4px 6px; font-size: 10px;
}
.cn-bottom .bb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 8px; color: var(--cn-dim); cursor: pointer; border-right: 1px solid #0c0e11; min-width: 52px; }
.cn-bottom .bb:hover { color: var(--cn-text); }
.cn-bottom .bb .g { font-size: 15px; }
.cn-bottom .warn { flex: 1; text-align: center; color: #b7bcc2; font-size: 10px; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.cn-bottom .dose { display: flex; flex-direction: column; justify-content: center; padding: 0 10px; border-left: 1px solid #0c0e11; font-size: 10px; }
.cn-bottom .dose b { color: var(--cn-gold); }

/* toast de aviso transitório */
.cn-toast {
  position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%);
  background: rgba(20,24,30,.95); border: 1px solid var(--cn-teal); color: var(--cn-teal);
  font-size: 11px; padding: 6px 14px; border-radius: 4px; z-index: 20;
  opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap;
}

/* aviso de radiação */
.cn-rad { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5; background: #c02020; color: #fff; font-weight: 800; padding: 8px 22px; border-radius: 4px; font-size: 15px; animation: cnblink .5s infinite; }
@keyframes cnblink { 50% { opacity: .3; } }

/* gantry (aquisição) */
.cn-gantry-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; height: 100%; min-height: 420px; position: relative; }
.cn-gantry { position: relative; width: 200px; height: 200px; }
.cn-gantry .ring { position: absolute; inset: 0; border: 16px solid #2a2e33; border-top-color: var(--cn-cyan); border-radius: 50%; }
.cn-gantry.spin .ring { animation: cnspin .8s linear infinite; }
@keyframes cnspin { to { transform: rotate(360deg); } }
.cn-gantry .bore { position: absolute; inset: 36px; background: #000; border-radius: 50%; border: 2px solid #333; }
.cn-gantry .table { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 120px; height: 22px; background: #2a2e33; border: 1px solid #444; border-radius: 4px; }
.cn-scanbar { width: 60%; max-width: 420px; height: 12px; background: #000; border: 1px solid var(--cn-line); border-radius: 4px; overflow: hidden; }
.cn-scanbar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f6ea8, #57b8e0); }

/* medição/anotação toolbar */
.cn-mprtool { position: absolute; top: 6px; right: 6px; z-index: 6; display: flex; gap: 4px; }
.cn-mprtool .cn-btn { font-size: 10px; padding: 4px 7px; }
.cn-measure-tip { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.7); color: var(--cn-teal); font-size: 10px; padding: 3px 8px; border-radius: 3px; z-index: 6; }

@media (max-width: 620px) {
  .cn-root { grid-template-columns: 120px 1fr; font-size: 11px; }
  .cn-reg { grid-template-columns: 1fr; }
  .cn-plan-lower { grid-template-columns: 1fr; }
}

/* arraste de cortes no MPR — cursor de livro (page-flip do console real) */
.cn-quad canvas { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ctext y='17' font-size='15'%3E%F0%9F%93%96%3C/text%3E%3C/svg%3E") 11 11, grab; }
.cn-quad canvas.cn-scrubbing { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ctext y='17' font-size='15'%3E%F0%9F%93%96%3C/text%3E%3C/svg%3E") 11 11, grabbing; }

/* 4º quadrante vazio (como no console real) */
.cn-quad-empty { background: #000; }
[data-el="mpr-loading"].on { display: flex !important; z-index: 12; }
[data-el="mpr-loadbar"] { transition: width .12s linear; }

/* painéis de ferramentas do MPR; ocupam exatamente a área Application */
.cn-mpr-panelbox {
  position:absolute; left:0; right:0; top:61.2%; bottom:0; z-index:7;
  box-sizing:border-box; overflow:hidden; padding:6px 5px;
  color:#c9cdd2; font-size:10px;
  background:linear-gradient(180deg,#292d34,#1a1d22);
  border-top:1px solid #080a0d;
}
.cn-mpr-panelbox button {
  min-height:24px; padding:3px 2px; cursor:pointer; color:#d3d7da; font-size:10px;
  background:linear-gradient(180deg,#4a4d53,#292c31); border:1px solid #111318;
  border-top-color:#656970; border-radius:1px; text-shadow:0 1px 1px #000;
}
.cn-mpr-panelbox button:hover { filter:brightness(1.14); }
.cn-mpr-panelbox button.sel { color:#10120c; background:linear-gradient(180deg,#e8e02a,#b9ad13); text-shadow:none; }
.cn-mpr-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.cn-mpr-filtergrid { margin-bottom:5px; }
.cn-mpr-filtergrid button { min-height:22px; }
.cn-mpr-widebtn { width:100%; margin-top:4px; }
.cn-mpr-subtabs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px; margin-bottom:6px; }
.cn-mpr-subtabs button { min-height:20px; }
.cn-mpr-toolgrid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:3px; margin-bottom:6px; }
.cn-mpr-toolgrid button { height:38px; font-size:20px; line-height:1; }
.cn-mpr-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:3px; margin:5px 0; }
.cn-mpr-panelinfo { min-height:30px; margin:5px 0; padding:5px; box-sizing:border-box;
  color:#a9c1c1; background:#0d1013; border:1px solid #30363b; line-height:1.3; }
.cn-mpr-annottext { display:grid; grid-template-columns:36px 1fr; gap:4px; align-items:center; margin-bottom:6px; }
.cn-mpr-annottext input { min-width:0; height:22px; box-sizing:border-box; color:#fff; background:#090b0d; border:1px solid #4b535a; padding:2px 5px; }
.cn-mpr-radio { display:block; margin:5px 2px; color:#c7ccd0; }
.cn-mpr-radio input { accent-color:#e2d926; }
.cn-mpr-rotatepad { display:grid; grid-template-columns:1fr 1fr 38px 1fr 1fr; gap:3px; align-items:center; margin:8px 0; }
.cn-mpr-rotatepad input { width:38px; height:25px; box-sizing:border-box; text-align:center; background:#080a0c; color:#fff; border:1px solid #4d555d; }
.cn-mpr-paneltitle { padding:3px 2px 5px; color:#e3e6e8; border-bottom:1px solid #454a50; margin-bottom:5px; }
.cn-mpr-zoomvalue { margin:8px auto; width:76px; padding:8px 2px; text-align:center; font-size:18px; color:#e8e226; background:#090b0e; border:1px solid #4d555d; }
.cn-mpr-curvedtile { width:66px; height:86px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.cn-mpr-curvedtile b { font-size:9px; font-weight:normal; }
.cn-mpr-spine { display:flex; align-items:center; justify-content:center; width:42px; height:48px; border-radius:50%; color:#65d1d1; font-size:34px; transform:rotate(90deg); background:#14181d; border:1px solid #607079; }
.cn-mpr-tab2foot { position:absolute; left:5px; right:5px; bottom:6px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:3px; }
/* pág.3 — menu de presets do WWWL (cinza 3D como no console real) */
.cn-wwwl-opt { padding: 5px 14px 5px 10px; cursor: pointer; line-height: 1.1; }
.cn-wwwl-opt:hover { background: #2f6fb3; }
.cn-mpr-range { display:flex; align-items:center; gap:5px; margin:8px 0; color:#b5bcc2; }
.cn-mpr-range input { flex:1; accent-color:#e4dc24; }

.cn-quad canvas.cn-tool-zoom { cursor:ns-resize; }
/* Rotate: cursor = seta circular de giro (SVG embutido, contorno preto p/ ler sobre a imagem) */
canvas.cn-tool-rotate {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M13 4.5a8.5 8.5 0 1 1-8.36 10' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M13 4.5a8.5 8.5 0 1 1-8.36 10' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M2.2 10.2 L4.9 16.6 L9.6 11.4 Z' fill='%23fff' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 13 13, ew-resize;
}
.cn-quad canvas.cn-tool-measure,
.cn-quad canvas.cn-tool-annot,
.cn-quad canvas.cn-tool-oblique,
.cn-quad canvas.cn-tool-curved { cursor:crosshair; }

/* painel Batch MPR fiel: substitui a grade Application no painel esquerdo */
.cn-bt { background: linear-gradient(180deg,#26292e,#17191d); border: 1px solid #000;
  border-radius: 3px; padding: 6px 5px; color: #c9cdd2; font-size: 10px; }
.cn-bt-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-bottom: 7px; }
.cn-bt-btn { background: linear-gradient(180deg,#3c4046,#23262b); border: 1px solid #0c0e11;
  border-top-color: #5a5e64; border-radius: 3px; color: #c9cdd2; font-size: 10px;
  padding: 4px 2px; cursor: pointer; }
.cn-bt-btn:hover { filter: brightness(1.15); }
.cn-bt-btn.armed { border-color: var(--cn-yellow); color: var(--cn-yellow); }
.cn-bt-field { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; }
.cn-bt-field span, .cn-bt-field label { flex: 1; color: #9aa4ad; font-size: 9.5px; display: flex; align-items: center; gap: 3px; }
/* No console, o campo que o técnico digita é PRETO; o campo calculado pelo
   aparelho (o par solto de Lock Number / Lock Interval) e a lista fechada da
   espessura são CINZA, fundindo com o painel. Conferido no vídeo do aparelho
   real de 07/08 — antes estavam todos brancos aqui. */
.cn-bt-field input[type="number"], .cn-bt-field input[type="text"] { width: 44px; background: #000; color: #e8eef2;
  border: 1px solid #555; border-radius: 1px; font-size: 10px; padding: 2px 3px; text-align: right; }
.cn-bt-field input[type="text"] { text-align: left; color: #e6dfa6; }
.cn-bt-field input.calc { background: #3a4046; color: #cfd6db; cursor: default; }
.cn-bt-field input.calc:focus { outline: none; }
.cn-bt-field select { width: 52px; background: #3a4046; color: #cfd6db;
  border: 1px solid #555; border-radius: 1px; font-size: 10px; padding: 1px 2px;
  font-family: inherit; cursor: pointer; }
.cn-bt-field input[type="checkbox"] { width: 11px; height: 11px; accent-color: #e0a828; }
.cn-bt-field i { font-style: normal; color: #8a9098; font-size: 9px; width: 28px; }
.cn-bt-field input:disabled { background: #23272b; color: #6b737a; }
.cn-bt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 7px 0 6px; }
.cn-bt-info { background: #0d1013; border: 1px solid #2a3034; border-radius: 3px;
  padding: 5px 6px; color: #9fb3b3; line-height: 1.35; margin-bottom: 6px; font-size: 9.5px; }
.cn-bt-info b { color: #7fd4d4; }
.cn-bt-close { display: block; width: 100%; padding: 5px 0; }

/* ---------- WORKLIST (RIS) ---------- */
.cn-wl { position: absolute; left: 238px; top: 398px; right: 6px; bottom: 6px; z-index: 22; }
.cn-wl-box { height: 100%; display: flex; flex-direction: column; background: #262a30;
  border: 1px solid #000; box-shadow: 0 8px 26px rgba(0,0,0,.55); }
.cn-wl-table { flex: 1; border-collapse: collapse; font-size: 10px; color: #cfd6da; width: 100%; display: block; overflow-y: auto; }
.cn-wl-table thead, .cn-wl-table tbody, .cn-wl-table tr { display: table; width: 100%; table-layout: fixed; }
.cn-wl-table th { background: linear-gradient(180deg,#3c4046,#2a2d33); border: 1px solid #17191d;
  font-weight: normal; color: #aeb6bd; padding: 3px 4px; text-align: left; font-size: 9.5px; }
.cn-wl-table td { border: 1px solid #1b1e22; padding: 3px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-wl-table tbody tr { cursor: pointer; background: #202329; }
.cn-wl-table tbody tr:nth-child(even) { background: #1b1e23; }
.cn-wl-table tbody tr.sel { background: #8aa62a; color: #10130a; }
.cn-wl-foot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #23262b; border-top: 1px solid #000; }
.cn-wl-q { flex: 0 0 130px; background: #0d0f12; border: 1px solid #3a4247; color: #dfe; font-size: 10px; padding: 3px 5px; }
.cn-wl-btn { background: linear-gradient(180deg,#3c4046,#23262b); border: 1px solid #0c0e11; border-top-color: #5a5e64;
  border-radius: 3px; color: #c9cdd2; font-size: 10.5px; padding: 4px 16px; cursor: pointer; }
.cn-wl-btn:hover { filter: brightness(1.15); }
.cn-wl-btn-ok { border-color: var(--cn-yellow); }
.cn-wl-host { margin-left: auto; color: #8a9098; font-size: 10px; }
.cn-wl-hostbtn { background: #0d0f12; border: 1px solid #3a4247; color: #cfd6da; font-size: 10px; padding: 3px 8px; }

/* ---------- modal Canon (mesa, import, avisos) ---------- */
.cn-modal-dim { position: absolute; inset: 0; z-index: 40; background: rgba(10,12,15,.45);
  display: flex; align-items: center; justify-content: center; }
.cn-modal { min-width: 320px; max-width: 90%; background: linear-gradient(180deg,#3a3f45,#26292e);
  border: 1px solid #101215; border-top-color: #5a5e64; box-shadow: 0 12px 34px rgba(0,0,0,.6);
  padding: 14px 16px; color: #dfe6ea; font-size: 12px; }
.cn-modal-msg { line-height: 1.5; margin-bottom: 10px; }
.cn-modal-kv { display: flex; justify-content: space-between; gap: 20px; padding: 3px 6px; font-size: 12px; }
.cn-modal-kv b { color: #fff; font-family: Consolas, monospace; }
.cn-modal-btns { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }

/* ---------- Fila de impressão / filmagem ---------- */
.cn-modal.pq { min-width: 460px; max-width: 94%; padding: 0; overflow: hidden; }
.cn-pq-hd { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: linear-gradient(180deg,#4a4f56,#2e3238); border-bottom: 1px solid #101215; }
.cn-pq-hd img { height: 22px; display: block; }
.cn-pq-hd b { color: #e8eef2; font-size: 13px; font-weight: 600; }
.cn-pq-hd span { margin-left: auto; color: #9aa4ad; font-size: 11px; }
.cn-pq-table { width: 100%; border-collapse: collapse; font-size: 11px; color: #dfe6ea; }
.cn-pq-table th { background: linear-gradient(180deg,#33383e,#23262b); color: #9fb3b3;
  font-weight: 400; text-align: left; padding: 5px 8px; border: 1px solid #101215; }
.cn-pq-table td { padding: 5px 8px; border: 1px solid #1a1e22; background: #14171c; }
.cn-pq-table tr.sel td { background: #1c2f47; color: #dff1ff; }
.cn-pq-empty { text-align: center; color: #8a9098; padding: 22px 12px; font-size: 12px; }
.cn-pq-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px;
  background: #1a1d21; border-top: 1px solid #101215; }
.cn-pq-foot .cn-wl-btn { min-width: 72px; }

/* ---------- Scan Sequence (tela do gantry) ---------- */
.cn-scanseq { border-collapse: collapse; font-size: 11px; color: #cfd6da; font-family: Consolas, monospace; }
.cn-scanseq td { border: 1px solid #262b31; padding: 3px 12px; text-align: center; background: #14171c; }
.cn-scanseq tr.hd td { background: linear-gradient(180deg,#33383e,#23262b); color: #9fb3b3; font-family: Tahoma, sans-serif; font-size: 10px; }
.cn-scanseq tr.on td { background: #1c2f47; color: #dff1ff; }

/* menu de entrada (familiarização) */
.cn-home { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(8,10,13,.82); backdrop-filter: blur(2px); }
.cn-home-box { width: min(760px, 92%); background: linear-gradient(180deg,#1b1f24,#12151a);
  border: 1px solid #000; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); padding: 22px 24px; }
.cn-home-hd { color: #cfe6e6; font-size: 15px; margin-bottom: 18px; border-bottom: 1px solid #2a3034; padding-bottom: 12px; }
.cn-home-hd b { color: #7fd4d4; font-size: 18px; }
.cn-home-hd span { display: block; color: #8aa; font-size: 12px; margin-top: 3px; }
.cn-home-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.cn-home-card { text-align: left; background: linear-gradient(180deg,#23282e,#171b20); border: 1px solid #000;
  border-radius: 8px; padding: 12px 14px; cursor: pointer; color: #cfe6e6; transition: transform .08s, border-color .12s; }
/* rodapé do menu: tutorial + sair */
.cn-home-foot { display: flex; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #2a3037; }
.cn-home-act { flex: 1; background: linear-gradient(180deg,#2b3138,#1b1f24); border: 1px solid #3a4247;
  border-radius: 6px; padding: 9px 12px; color: #dfe6ea; font-size: 12px; cursor: pointer; transition: border-color .12s, background .12s; }
.cn-home-act:hover { border-color: #2f81f7; background: linear-gradient(180deg,#33404d,#1f262c); }
.cn-home-act.danger { flex: 0 0 120px; color: #f0b3b3; }
.cn-home-act.danger:hover { border-color: #c0392b; background: linear-gradient(180deg,#4a2323,#2a1616); color: #ffd8d8; }
.cn-home-card:hover { border-color: #2f81f7; transform: translateY(-2px); }
.cn-home-card .ico { font-size: 26px; margin-bottom: 8px; }
.cn-home-card b { display: block; color: #fff; font-size: 14px; margin-bottom: 4px; }
.cn-home-card span { color: #9fb3b3; font-size: 12px; line-height: 1.35; }
.cn-home-btn { position: absolute; top: 8px; right: 10px; z-index: 15; background: rgba(20,24,28,.7);
  color: #9fb3b3; border: 1px solid #3a4247; border-radius: 6px; padding: 5px 10px; font-size: 11px; cursor: pointer; }
.cn-home-btn:hover { background: #2f81f7; color: #fff; }
@media (max-width: 620px) { .cn-home-grid { grid-template-columns: 1fr; } }

/* ---------- worklist "Get from server" (Appoint., ajustes5) — namespace apwl ---------- */
.cn-apwl {
  position: absolute; left: 6px; right: 6px; top: 386px; bottom: 36px; z-index: 12;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #4d525b, #3d424a);
  border: 1px solid #04070b; border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0,0,0,.6);
}
/* header como no console real: quadradinho azul + texto + barra azul comprida a direita */
.cn-apwl-title {
  display: flex; align-items: center; gap: 6px; height: 20px; padding: 3px 8px 0;
  background: none; border: none;
}
.cn-apwl-sq { width: 10px; height: 10px; background: #4a5fae; border: 1px solid #2c3a6e; flex: none; }
.cn-apwl-cap { color: #eef2f6; font-size: 12px; white-space: nowrap; }
.cn-apwl-bluebar { flex: 1; height: 9px; margin-left: 10px; background: linear-gradient(180deg, #6470d8, #4a55b8); border: 1px solid #333c7a; border-radius: 1px; }
.cn-apwl-sub { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 2px 10px 0; }
.cn-apwl-radios { display: flex; align-items: center; gap: 6px; color: #e8ecf0; font-size: 11px; }
.cn-apwl-count { color: #eef2f6; font-size: 11px; }
.cn-apwl-body { flex: 1; display: flex; gap: 6px; padding: 4px 6px 6px; min-height: 0; }
.cn-apwl-side { display: flex; flex-direction: column; gap: 4px; width: 86px; flex: none; }
.cn-apwl-btn {
  height: 30px; padding: 0 4px; font-size: 11px; line-height: 1.05;
  background: linear-gradient(180deg, #d9dde2, #9fa6ae); color: #14171b;
  border: 1px solid #2a2e34; border-top-color: #f2f4f6; border-radius: 3px;
  text-shadow: none; font-weight: 600;
}
.cn-apwl-btn:hover { filter: brightness(1.06); }
.cn-apwl-btn:active { background: linear-gradient(180deg, #9fa6ae, #d9dde2); }
/* botoes laterais escuros com letra branca, como no console real */
.cn-apwl-big {
  height: 34px; font-size: 14px; font-weight: 700;
  color: #f2f5f8; text-shadow: 0 1px 1px #000;
  background: linear-gradient(180deg, #5a5f66, #3a3e45);
  border: 1px solid #202329; border-top-color: #7a8087;
}
.cn-apwl-big:hover { filter: brightness(1.12); }
.cn-apwl-big:active { background: linear-gradient(180deg, #33373d, #4a4e55); }
/* Skip/Select desabilitados: aparencia apagada */
.cn-apwl-btn:disabled { opacity: .5; filter: grayscale(.4); cursor: default; pointer-events: none; }
/* host WORKLIST: select cinza com letra branca, como no console real */
.cn-apwl-host {
  background: linear-gradient(180deg, #5a5f66, #3a3e45);
  color: #f2f5f8; font-size: 11px; padding: 1px 4px;
  border: 1px solid #202329; border-top-color: #7a8087; border-radius: 2px;
}
.cn-apwl-tablewrap { flex: 1; overflow-y: auto; border: 1px solid #000; background: #0c0e10; }
.cn-apwl-table { width: 100%; border-collapse: collapse; font-size: 11px; color: #e1e5e9; }
.cn-apwl-table thead { position: sticky; top: 0; }
.cn-apwl-table th {
  padding: 3px 4px; border: 1px solid #000; font-weight: normal;
  background: linear-gradient(180deg, #2a2e33, #1a1d21); text-align: center; white-space: nowrap;
}
.cn-apwl-table td { padding: 2px 4px; border-left: 1px solid #14171a; white-space: nowrap; }
.cn-apwl-table tbody tr { cursor: pointer; }
.cn-apwl-table tbody tr:hover { background: #1b2028; }
.cn-apwl-table tbody tr.sel { background: #6b6f14; color: #fff; }
.cn-apwl-foot {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 100px;
}
.cn-apwl-foot span { color: #e2e8ee !important; font-weight: 600; font-size: 11px; }
.cn-apwl-foot .cn-apwl-btn { height: 22px; width: 60px !important; font-weight: 400; }
/* grupo List Search com moldura clara, como no console real */
.cn-apwl-searchbox {
  display: flex; align-items: center; gap: 10px;
  padding: 3px 10px; border: 1px solid #aab1b9; border-radius: 2px;
}
/* opções do mini-menu do Appoint: sem borda; borda cinza só ao passar o mouse */
.cn-apmenu-opt { padding: 3px 0; cursor: pointer; border: 2px solid transparent; border-radius: 2px; line-height: 1.2; }
.cn-apmenu-opt:hover { border-color: #b9c2cb; }

.cn-apwl-search {
  width: 200px; background: #0a0b0c; border: 1px solid #23262b; border-radius: 2px;
  color: #e6f2f8; font-size: 12px; padding: 2px 6px; height: 20px;
}

/* ---------- aquisição ao vivo (scan) — "sensação de estar cortando" (item 2) ---------- */
.cn-acq { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 600px; max-width: 92%; }
.cn-acq-banner {
  align-self: stretch; text-align: center; padding: 5px 0; border-radius: 3px;
  background: linear-gradient(180deg, #f0aa3d, #d3801d); color: #201206;
  border: 1px solid #000; font-size: 13px; font-weight: 600; letter-spacing: .3px;
}
.cn-acq-views { display: flex; gap: 16px; align-items: flex-start; justify-content: center; }
.cn-acq-scout { position: relative; }
.cn-acq-scout canvas { display: block; background: #000; border: 1px solid #556; border-radius: 2px; }
.cn-acq-line {
  position: absolute; left: 0; right: 0; height: 2px; top: 0;
  background: #ffe000; box-shadow: 0 0 5px #ffe000; pointer-events: none;
}
.cn-acq-slice canvas { display: block; background: #000; border: 1px solid #8b8f94; border-radius: 2px; width: 256px; height: 256px; }
.cn-acq-caption { display: block; text-align: center; margin-top: 3px; font-size: 10px; color: #9fb2c4; }

/* ---------- tiles MPR/3D/Clinical bloqueados sem exame (item 3) ---------- */
.cn-vtab.is-locked { filter: grayscale(1) brightness(.62); opacity: .55; }
.cn-vtab.is-locked:hover { filter: grayscale(1) brightness(.68); }
.cn-vtab.is-locked img { filter: grayscale(1); }

/* ---------- protocolos travados sem paciente selecionado ---------- */
[data-el="protolist"].is-locked { pointer-events: none; filter: grayscale(1) brightness(.72); opacity: .5; }
.cn-grouptabs .cn-tabx.disabled { opacity: .45; }

/* ---------- tela 3D (v3d): presets + VR ---------- */
.cn-p3card { position: relative; cursor: pointer; text-align: center; }
.cn-p3card img { width: 100%; display: block; border: 1px solid #3a3f46; }
.cn-p3card span { display: block; margin-top: 5px; font-size: 10px; color: #cdd6de; }
.cn-p3card:hover img { border-color: #8fa4b8; filter: brightness(1.1); }
.cn-tdcell { position: absolute; width: 28%; cursor: pointer; }
.cn-tdcell img { width: 100%; display: block; transition: transform .13s ease, filter .13s ease; }
.cn-tdcell:hover img { transform: translateY(-2px); filter: brightness(1.15); }
.cn-tdcell:active img { transform: translateY(0); }
.cn-v3dovl { position: absolute; top: 3px; left: 5px; font-size: 8px; color: #cfd6da; font-family: Consolas, monospace; white-space: pre; line-height: 1.25; pointer-events: none; }
.cn-v3dwl { position: absolute; bottom: 14px; left: 5px; font-size: 8px; color: #cfd6da; font-family: Consolas, monospace; white-space: pre; line-height: 1.25; pointer-events: none; }

/* ===== tela Scan fixa (gantry + sequence, fiel ao console) ===== */
.cn-scanlbl { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; background: #445464; border: 1px solid #ced6df; border-radius: 12px 3px 3px 12px; color: #fff; font-size: 10px; font-weight: 600; box-shadow: inset 0 1px 2px rgba(255,255,255,.25); white-space: nowrap; }
.cn-scaninp { height: 22px; min-width: 0; background: #0b0d0f; border: 1px solid #383e45; border-radius: 3px; color: #e8eef2; font-size: 12px; padding: 0 7px; }
.cn-scansel { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; background: linear-gradient(180deg,#3b3f46,#26292e); border: 1px solid #14171a; border-radius: 2px; color: #dfe5ea; }
/* ===== Scan Sequence no layout do console (barra de titulo + grid 7 colunas) =====
   proporcoes e cores do modelo do cliente, escaladas para os 330px do painel */
.cn-seq-top {
  display: grid; grid-template-columns: 13% 18% 16% 17% 17% 19%;
  background: linear-gradient(#3b3e44 0%, #33363c 100%);
  border: 2px solid #4e5258; border-top-color: #2c2f34;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.45);
}
.cn-seq-top > div {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 34px; color: #d7d7d7; font-size: 9px; line-height: 1.05;
  letter-spacing: .01em; text-shadow: 0 1px 2px #000;
}
.cn-seq-top .btn {
  margin: 5px 0; border: 1px solid #17191c; border-radius: 0;
  background: linear-gradient(#32353b, #272a2f);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.12), inset -1px -1px 0 rgba(0,0,0,.65), 0 1px 1px rgba(0,0,0,.8);
}
/* botoes vizinhos encostados: sem borda dupla entre eles */
.cn-seq-top .btn + .btn { border-left: none; }
.cn-seq-grid {
  display: grid; grid-template-columns: 7.2% 9.1% 19.2% 16.3% 19.0% 16.2% 13%;
  border-left: 2px solid #85898d; border-top: 2px solid #6b6f74;
}
.cn-seq-grid .c {
  display: flex; align-items: center; justify-content: center; height: 24px;
  border-right: 1px solid rgba(145,149,154,.55); border-bottom: 1px solid rgba(145,149,154,.42);
  color: #e8e8e8; font-size: 10px; line-height: 1; text-shadow: 0 1px 2px #000;
  background: #000; white-space: nowrap; overflow: hidden;
}
.cn-seq-grid .r1 { background: linear-gradient(#44484f, #383c42); color: #4c90d8; border-bottom: 1px solid #5d6268; }
.cn-seq-grid .r2 { background: linear-gradient(90deg, #131900 0%, #1a2300 50%, #111700 100%); }
.cn-seq-grid .r3 { background: #000; }
.cn-seq-grid .st { letter-spacing: .24em; padding-left: .24em; }
.cn-seq-grid .sm { font-size: 9px; }

/* ===== painel do Protocol na tela Scan (modelo do console) ===== */
.cn-seq-band { height: 20px; background: linear-gradient(#70757c, #5c6168); border: 1px solid #3f444a; border-top: none; }
.cn-seq-panel { background: #000; border: 1px solid #2c3136; border-top: none; padding: 4px; }
.cn-seq-prow { display: flex; gap: 8px; align-items: flex-start; }
/* moldura em relevo do comentario do protocolo */
.cn-protocmt { flex: 1; min-width: 0; background: linear-gradient(#3b4046, #2c3137); border: 1px solid #7d838b;
  padding: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.cn-protocmt .lbl { color: #c8ced4; font-size: 9px; padding: 1px 2px 3px; }
.cn-protocmt .box { background: #000; border: 1px solid #6c727a; padding: 3px 5px; min-height: 30px;
  color: #eef2f5; font-size: 9px; line-height: 1.4; box-shadow: inset 1px 1px 3px rgba(0,0,0,.95); }
/* Language / Pre Scan / Post Scan com botao prata 3D */
.cn-seq-opts { width: 156px; flex: none; display: grid; grid-template-columns: 48px 1fr; gap: 3px 4px; align-items: center; }
.cn-seq-opts .k { color: #b9c0c7; font-size: 9px; }
.cn-seq-opts .v { display: flex; align-items: center; gap: 4px; height: 17px; padding: 0 3px;
  background: linear-gradient(#eef1f4 0%, #d3d8dd 48%, #b6bcc3 52%, #cdd2d8 100%);
  border: 1px solid #767c85; color: #12161a; font-size: 9px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 1px rgba(0,0,0,.55); }
.cn-seq-opts .v svg { width: 11px; height: 11px; flex: none; }
.cn-seq-opts .v b { margin-left: auto; font-weight: normal; font-size: 9px; line-height: 1; }
/* area preta dos asteriscos, com as divisorias do console */
.cn-seq-stars { display: grid; grid-template-columns: 13% 21% 1fr; height: 74px; margin-top: 4px;
  background: #000; border: 1px solid #2c3136; }
.cn-seq-stars > div { border-right: 1px solid #2c3136; }
.cn-seq-stars .st { border-right: none; display: flex; align-items: center; padding-left: 10%;
  color: #37b6c9; letter-spacing: 8px; font-size: 15px; }

/* ===== painel do planejamento na tela Scan (fase plan) — arte do cliente ===== */
/* moldura vem do PNG (background); o texto é HTML por cima, como no console */
.cn-splb {
  flex: 1; height: 40px; background-size: 100% 100%; background-repeat: no-repeat;
  display: flex; align-items: flex-end; justify-content: center;
  color: #e8ecef; font-size: 9px; line-height: 1; padding-bottom: 4px;
  cursor: pointer; text-shadow: 0 1px 1px #000; box-sizing: border-box;
}
.cn-splb.mid { align-items: center; padding-bottom: 0; font-size: 10px; }
.cn-splb span { pointer-events: none; }
.cn-splr { width: 33px; height: 33px; cursor: pointer; }
.cn-splr img { width: 100%; height: 100%; display: block; }

/* ===== modal da mesa (Couch will move) — caixa cinza clara do console ===== */
.cn-modal.cn-modal-couch {
  min-width: 300px; max-width: 340px;
  background: linear-gradient(180deg, #c6cacf, #a9afb6 55%, #9aa0a8);
  border: 1px solid #6f757c; border-top-color: #e6e9ec;
  color: #14171a; text-shadow: 0 1px 0 rgba(255,255,255,.4);
  box-shadow: 0 14px 36px rgba(0,0,0,.65);
}
.cn-modal-couch .cn-modal-msg { color: #14171a; margin-bottom: 12px; }
.cn-modal-couch .cn-modal-kv { color: #23272c; padding: 3px 14px; }
.cn-modal-couch .cn-modal-kv b { color: #101316; font-family: Consolas, monospace; }
.cn-couch-btn {
  min-width: 62px; padding: 4px 12px; font-size: 12px; cursor: pointer;
  background: linear-gradient(180deg, #d6dade, #b4bac0 50%, #a3a9b0);
  border: 1px solid #787e85; border-radius: 3px; color: #3d4248;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.cn-couch-btn:hover { filter: brightness(1.06); }
.cn-couch-btn.ok {
  background: linear-gradient(180deg, #e8cf5a, #d0ac20 55%, #b89610);
  border: 2px solid #fff2a8; outline: 1px solid #6f6410; color: #1c1806; font-weight: 700;
}

/* painel do Protocol estica até o footer (bloco preto dos asteriscos cresce) */
[data-screen="scan"] .cn-seq-panel { flex: 1; display: flex; flex-direction: column; }
[data-screen="scan"] .cn-seq-stars { flex: 1; height: auto; min-height: 74px; }

/* ícone SVG de uma cor dentro do console (herda a cor do texto) */
.ic { display: inline-block; vertical-align: -0.14em; flex: none; }
.cn-bb .ic, .bb .ic { display: block; margin: 0 auto 1px; }

/* ===== menu do botão direito no viewport (Close) — estilo do console ===== */
.cn-ctxmenu { position: absolute; z-index: 60; min-width: 124px; padding: 3px 2px;
  background: linear-gradient(180deg, #4a4f57, #383c43); border: 1px solid #23262b;
  box-shadow: 2px 4px 12px rgba(0,0,0,.7); font-size: 11px; color: #f0f3f6; user-select: none;
  white-space: nowrap; }
.cn-ctxitem { padding: 5px 14px; cursor: pointer; white-space: nowrap; color: #f0f3f6; text-align: center; }
.cn-ctxitem.hot { background: #2f6fb5; color: #fff; }
.cn-ctxitem.off { color: #8d939b; cursor: default; }
/* lista dos <select> do console: mesma arte do menu de botão direito, no lugar
   da lista branca do sistema. O item atual fica marcado. */
.cn-selmenu { max-height: 170px; overflow-y: auto; }
.cn-selmenu .cn-ctxitem { padding: 4px 12px; }
.cn-selmenu .cn-ctxitem.sel { background: #2a2e34; color: #ffd964; }
.cn-selmenu .cn-ctxitem.sel.hot { background: #2f6fb5; color: #fff; }
.cn-selmenu::-webkit-scrollbar { width: 9px; }
.cn-selmenu::-webkit-scrollbar-track { background: #24272c; }
.cn-selmenu::-webkit-scrollbar-thumb { background: #565c66; border: 1px solid #23262b; }