*{box-sizing:border-box}body{margin:0;background:#07101b;color:#e6eef8;font:12px Arial,sans-serif}button,input{font:inherit;color:inherit}.app{display:grid;grid-template-columns:210px 1fr;min-height:100vh}aside{background:#09131f;border-right:1px solid #1b2b3d;padding:18px 12px}.brand{padding:8px 8px 28px}.brand b,.brand small{display:block}.brand b{font-size:15px}.brand small{color:#6f849b;font-size:9px;margin-top:5px}nav button{width:100%;border:0;background:none;text-align:left;padding:11px;border-radius:8px;color:#8195aa;margin:2px 0}nav button.active{background:#10243a;color:#fff;border-left:3px solid #2e80ff}nav i{float:right;font-style:normal}.server{position:absolute;bottom:70px;width:180px;border:1px solid #1b2b3d;border-radius:9px;padding:10px}.server b,.server span{display:block;font-size:9px;margin:6px 0}.server span{color:#71869c}.server strong{float:right}.server em,.connection i{display:inline-block;width:7px;height:7px;background:#35d58a;border-radius:50%}progress{width:100%;height:4px}.admin{position:absolute;bottom:15px;display:flex;gap:8px;align-items:center}.admin>div{width:30px;height:30px;border-radius:50%;background:#17375a;display:grid;place-items:center}.admin b,.admin small{display:block;font-size:9px}.admin small{color:#70859b;margin-top:3px}main{padding:20px;min-width:0}header{display:flex;justify-content:space-between;align-items:center}header small{color:#5b82ad;font-size:8px;font-weight:bold}h1{font-size:22px;margin:5px 0 15px}.actions{display:flex;gap:7px}.actions input{width:260px;background:#0b1723;border:1px solid #20364d;border-radius:8px;padding:9px}.actions button,.blue{border:1px solid #2b4a68;background:#0c1825;border-radius:8px;padding:8px 12px}.blue{background:#2578ee!important;border-color:#428cf3!important}.metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:11px}.metrics article{background:#0c1825;border:1px solid #1b2b3d;border-radius:10px;padding:13px;display:flex;gap:10px;align-items:center}.metrics small,.metrics b,.metrics span{display:block}.metrics small{font-size:7px;color:#6e839a}.metrics b{font-size:19px;margin:2px 0}.metrics span{font-size:7px;color:#667b92}.green{color:#35d58a!important}.workspace{display:grid;grid-template-columns:245px minmax(700px,1fr);gap:10px}.panel{background:#0c1724;border:1px solid #1b2b3d;border-radius:11px;overflow:hidden}.title{height:55px;padding:12px;border-bottom:1px solid #1b2b3d;display:flex;justify-content:space-between;align-items:center}.title b,.title small{display:block}.title small{font-size:8px;color:#71869c;margin-top:4px}.title button{background:none;border:0;color:#7c91a7}.search{padding:9px}.search input{width:100%;background:#08131e;border:1px solid #20364d;border-radius:7px;padding:8px}.chips{padding:0 9px 7px}.chips button{background:#0b1723;border:1px solid #1c3044;color:#71869c;border-radius:6px;padding:5px 7px;font-size:8px}.chips .active{background:#102b4a;color:#7cb4ff}.machineItem{padding:10px;margin:4px 7px;border:1px solid transparent;border-radius:8px;cursor:pointer}.machineItem.active,.machineItem:hover{background:#10243a;border-color:#25496e}.machineItem b{font-size:9px}.machineItem em{float:right;font-size:7px;font-style:normal}.machineItem small{display:block;color:#70859b;font-size:7px;margin-top:5px}.machineItem span{display:inline-block;background:#142638;color:#7e94aa;font-size:6px;padding:3px 5px;margin:6px 3px 0 0;border-radius:4px}.machineHead{height:65px;display:flex;justify-content:space-between;align-items:center;padding:0 13px;border-bottom:1px solid #1b2b3d}.machineHead>div{display:flex;align-items:center}.star{color:#f4b940;font-size:15px;margin-right:8px}.machineHead h2{font-size:14px;margin:0}.machineHead h2 i{font-size:7px;color:#35d58a;font-style:normal;background:#102c27;padding:4px 6px;border-radius:5px}.machineHead small{font-size:7px;color:#71869c}.machineHead button,.control button{background:#0e1c2a;border:1px solid #284159;border-radius:7px;padding:7px 10px;font-size:8px}.control{height:50px;display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid #1b2b3d}.control>div{margin-right:auto}.control small,.control b{display:block;font-size:7px}.control b{font-size:9px;margin-top:3px}.control label{font-size:8px;color:#8094aa;display:flex;align-items:center;gap:6px}.switch{width:30px;height:17px!important;padding:2px!important;border-radius:20px!important}.switch i{display:block;width:12px;height:12px;border-radius:50%;background:white}.switch.on{background:#2578ee}.switch.on i{margin-left:12px}.browserGrid{display:grid;grid-template-columns:195px minmax(370px,1fr) 175px;min-height:565px}.profiles{padding:9px 7px;background:#091521;border-right:1px solid #1b2b3d}.subhead b,.subhead small{display:block;font-size:9px}.subhead small{font-size:7px;color:#70859b;margin:3px 0 8px}.profile{border:1px solid #23425f;border-radius:8px;margin-bottom:7px;overflow:hidden}.profileHead{display:flex;align-items:center;gap:7px;padding:8px}.profileHead>i,.destination>i{width:24px;height:24px;background:#173b60;color:#76b5ff;border-radius:6px;display:grid;place-items:center;font-style:normal}.profileHead span{flex:1}.profileHead b,.profileHead small{display:block;font-size:8px}.profileHead small{font-size:6px;color:#71869c;margin-top:3px}.profile>label{display:block;border-top:1px solid #1b2b3d;padding:6px 8px;color:#63798f;font-size:6px}.profile>label span{float:right}.tabsWrap{display:flex;flex-direction:column;gap:2px;padding:4px 0;border-top:1px solid #1b2b3d}.tab{width:calc(100% - 8px);margin:1px 4px;border:0;background:none;border-radius:6px;padding:6px;display:flex;gap:7px;text-align:left;position:relative}.tabClose{background:none;border:0;color:#e6eef8;padding:0 6px;font-size:12px;cursor:pointer;opacity:0;transition:.2s;margin-left:auto;align-self:center}.tab:hover .tabClose{opacity:1}.tab.active,.tab:hover{background:#132b44}.tab::before{content:'';width:6px;height:6px;border-radius:50%;background:transparent;margin-right:0;transition:.2s}.tab.selected::before{background:#2578ee;box-shadow:0 0 8px rgba(37,120,238,0.6)}.tab>i,.selected>i,.viewerHead i{width:19px;height:19px;border-radius:5px;background:#1aaa68;display:grid;place-items:center;font-style:normal;font-size:8px}.tab span b,.tab span small{display:block;font-size:8px}.tab span small{font-size:6px;color:#70859b;margin-top:2px}.simple{border-color:#1b2b3d}.remote{width:100%;border:1px dashed #2d5379;background:#0c1c2b;color:#6aa8f6;border-radius:7px;padding:9px;font-size:8px;margin-bottom:6px}.viewer{background:#07111b}.viewerHead{height:42px;background:#0b1723;border-bottom:1px solid #1b2b3d;display:flex;justify-content:space-between;align-items:center;padding:0 9px}.viewerHead>div{display:flex;align-items:center;gap:6px}.viewerHead b,.viewerHead small{display:block;font-size:8px}.viewerHead small{font-size:6px;color:#71869c}.viewerHead button{background:#0d1b29;border:1px solid #24384c;color:#8094a9;border-radius:5px}.latency{font-size:7px;color:#35d58a}.screen{position:relative;margin:9px;height:470px;border:1px solid #273b4f;border-radius:6px;overflow:hidden}

.keyboardInput{display:flex;gap:8px;margin:9px;padding:0}
.keyboardInput input{flex:1;background:#0b1723;border:1px solid #20364d;border-radius:6px;padding:10px;color:#e6eef8;font-size:12px}
.keyboardInput input:focus{outline:none;border-color:#2e80ff;box-shadow:0 0 0 2px rgba(46,128,255,0.2)}
.keyboardInput input::placeholder{color:#63798f}
.keyboardInput button{background:#2578ee;border:1px solid #428cf3;color:#fff;border-radius:6px;padding:10px 16px;font-size:12px;font-weight:600;cursor:pointer;transition:.2s}
.keyboardInput button:hover{background:#1e63cc;box-shadow:0 4px 12px rgba(37,120,238,0.3)}
.keyboardInput button:active{transform:scale(0.98)}.chromeBar{height:28px;background:#1a2631;padding:8px;color:#8e9eac;font-size:7px}.chromeBar span{display:inline-block;width:70%;background:#25323d;border-radius:9px;margin-left:10px;padding:3px 10px}.waMock{display:grid;grid-template-columns:35% 65%;height:calc(100% - 28px);color:#25333a;background:#efeae2}.waSide{background:#fff;border-right:1px solid #ddd}.waTop{height:36px;background:#f0f2f5;padding:11px;font-size:7px}.waSearch{margin:5px;background:#f0f2f5;border-radius:5px;padding:7px;font-size:6px;color:#87969e}.chat{display:flex;gap:6px;padding:7px;border-bottom:1px solid #eee}.chat i{width:25px;height:25px;border-radius:50%;background:#bdd6ca}.chat b,.chat small{display:block;font-size:6px}.chat small{color:#78878e;margin-top:4px}.chat.active{background:#f0f2f5}.waMain{display:flex;flex-direction:column}.messages{flex:1;padding:25px 18px}.messages p{width:max-content;max-width:75%;background:#fff;padding:7px;border-radius:5px;font-size:6px}.messages .me{margin-left:auto;background:#d9fdd3}.message{height:38px;background:#f0f2f5;padding:8px;font-size:7px}.message span{display:inline-block;background:white;width:70%;padding:6px;border-radius:6px;color:#9aa4a9}.watermark{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);background:#07111bcc;color:#58718a;padding:4px 7px;font-size:5px}.connection{height:35px;border-top:1px solid #1b2b3d;padding:7px 10px;display:flex;justify-content:space-between;color:#71869c;font-size:6px}.connection span:first-child{display:grid;grid-template-columns:10px auto;grid-template-rows:auto auto}.connection i{grid-row:1/3}.connection small{grid-column:2}.info{padding:0;background:#091521}.infoTabs{display:grid;grid-template-columns:1fr 1fr;height:38px}.infoTabs button{border:0;background:none;color:#71869c;font-size:8px}.infoTabs .active{color:#6da9f8;border-bottom:2px solid #2e80ff}.info section{padding:10px;border-top:1px solid #1b2b3d}.info label,.modal>label{display:block;color:#657b91;font-size:6px;font-weight:bold;margin-bottom:7px}.selected{display:flex;gap:7px}.selected b,.selected small{display:block;font-size:8px}.selected small{font-size:6px;color:#71869c}.detailGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detailGrid b{font-size:7px}.url{background:#07121d;border:1px solid #1d3044;border-radius:5px;padding:7px;color:#8498aa;font-size:6px;overflow:hidden}.info dl{margin:0}.info dl div{display:flex;justify-content:space-between;margin:7px 0}.info dt,.info dd{font-size:6px}.info dt{color:#70859b}.info dd{margin:0}.tags span{display:inline-block;background:#13273a;color:#86a0b8;padding:4px 6px;border-radius:5px;font-size:6px;margin-right:3px}.recent{margin-top:10px}.recent table{width:100%;border-collapse:collapse}.recent th,.recent td{text-align:left;padding:9px 12px;border-bottom:1px solid #17283a;font-size:7px}.recent th{color:#61768d;font-size:6px}.blueText{color:#5da2ff}.modalBg{position:fixed;inset:0;background:#02070dcc;display:grid;place-items:center}.modalBg[hidden]{display:none}.modal{width:440px;background:#0d1a28;border:1px solid #294058;border-radius:13px;padding:17px;box-shadow:0 30px 80px #0009}.modalTitle{display:flex;justify-content:space-between}.modalTitle b,.modalTitle small{display:block}.modalTitle small{font-size:8px;color:#7b90a5;margin-top:4px}.modalTitle button{border:0;background:none;font-size:18px}.destination{display:flex;align-items:center;gap:8px;margin:16px 0;padding:10px;background:#091522;border:1px solid #1d3044;border-radius:8px}.destination span{flex:1}.destination small,.destination b{display:block;font-size:7px}.destination em{font-size:7px;color:#35d58a;font-style:normal}.modal>input{width:100%;background:#07131f;border:1px solid #31577c;border-radius:8px;padding:11px}.modal p{font-size:7px;color:#71869c}.modal footer{text-align:right}.modal footer button{border:1px solid #294058;background:#0c1825;border-radius:7px;padding:8px 11px;margin-left:5px}#toast{position:fixed;right:20px;bottom:20px;background:#10283d;border:1px solid #2d5579;padding:10px 13px;border-radius:8px;font-size:9px;opacity:0;transform:translateY(50px);transition:.2s}#toast.show{opacity:1;transform:none}@media(max-width:1100px){.metrics{grid-template-columns:repeat(3,1fr)}.app{grid-template-columns:65px 1fr}.brand small,.brand b{font-size:0}nav button{font-size:0}nav button:first-letter{font-size:14px}.server,.admin{display:none}.workspace{grid-template-columns:220px 1fr}.browserGrid{grid-template-columns:180px 1fr}.info{display:none}}@media(max-width:768px){*{box-sizing:border-box}body{font:11px Arial}.app{display:flex;flex-direction:column;min-height:100vh}aside{width:100%;border-right:0;border-bottom:1px solid #1b2b3d;padding:12px;display:flex;justify-content:space-between;align-items:center;height:auto}.brand{padding:0;margin-right:10px}.brand b{font-size:13px}.brand small{display:inline;margin-left:5px}.nav{display:flex;gap:5px;flex:1}nav{display:flex;gap:0;width:100%;flex-wrap:wrap}nav button{flex:1;min-width:60px;padding:8px 6px;font-size:10px;margin:0}nav button.active{border-left:0;border-bottom:2px solid #2e80ff}.server,.admin{position:static;width:auto;margin-top:10px;display:none}main{padding:12px;flex:1;overflow-y:auto}header{flex-direction:column;align-items:flex-start;gap:10px}.actions{width:100%;flex-wrap:wrap}.actions input{width:100%;flex:1;min-width:150px}.metrics{grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:8px}.metrics article{padding:10px;gap:8px}.metrics small{font-size:6px}.metrics b{font-size:14px}.workspace{grid-template-columns:1fr;gap:8px;min-height:auto}.machines{order:2}.browser{order:1}.recent{order:3}.panel{border-radius:8px}.machineHead{height:auto;flex-wrap:wrap;padding:10px;gap:10px}.machineHead h2{font-size:12px}.star{font-size:12px}.control{height:auto;flex-wrap:wrap;padding:8px;gap:6px}.control button{flex:1;min-width:80px;padding:6px 8px;font-size:9px}.browserGrid{grid-template-columns:1fr;min-height:auto}.profiles{border-right:0;border-bottom:1px solid #1b2b3d;max-height:150px;overflow-y:auto}.subhead{position:sticky;top:0;background:#091521;padding:8px 7px}.subhead b{font-size:8px}.subhead small{font-size:7px}.profile{margin-bottom:6px;border-radius:6px}.profileHead{padding:8px;gap:6px}.profileHead>i{width:20px;height:20px}.profileHead b{font-size:8px}.tab{padding:5px;font-size:7px}.tab>i{width:16px;height:16px;font-size:7px}.viewer{min-height:300px}.screen{margin:6px;height:300px;border-radius:6px}.chromeBar{height:24px;font-size:6px;padding:6px}.viewerHead{height:36px;padding:6px;gap:4px}.viewerHead b{font-size:7px}.viewerHead button{padding:4px 6px;font-size:7px}.latency{font-size:6px}.connection{height:30px;padding:6px;font-size:6px}.info{border-top:1px solid #1b2b3d;padding:0;max-height:200px;overflow-y:auto}.infoTabs{height:32px}.infoTabs button{padding:6px;font-size:8px}.info section{padding:8px;border-top:1px solid #1b2b3d}.info label{font-size:6px}.detailGrid{grid-template-columns:1fr;gap:6px}.url{font-size:6px;padding:6px}.tags span{padding:3px 5px;font-size:5px}.remote{padding:8px;font-size:8px}.modal{width:90%;max-width:400px;padding:14px}.modalTitle{font-size:9px}.modal>input{padding:9px}.modal footer button{padding:6px 10px}.recent table{font-size:6px}.recent th,.recent td{padding:6px 8px}h1{font-size:16px;margin:3px 0 8px}.search input{padding:7px;font-size:8px}.machineItem{padding:8px;margin:3px 5px}.machineItem b{font-size:8px}.machineItem small{font-size:6px}}
.emptyState{padding:24px 16px;text-align:center;color:#6a819c;font-size:10px}.emptyState b{display:block;color:#8ba6c4;font-size:11px;margin-bottom:6px}.emptyState p{margin:6px 0;font-size:9px;line-height:1.5}.viewerPlaceholder{display:grid;place-items:center;height:calc(100% - 28px);padding:20px}.placeholderBox{max-width:340px;text-align:center;color:#6a809a}.placeholderBox b{display:block;color:#9dbadd;font-size:11px;margin-bottom:10px}.placeholderBox p{font-size:8px;line-height:1.6;margin:8px 0}.placeholderBox code{background:#0f1c2b;color:#7cb4ff;padding:2px 6px;border-radius:4px;font-size:8px}

/* Tab visibility & focus styles */
.tab.active span b {
  color: #f4d958 !important;
}

.tab.active {
  background: #1a3d5c !important;
  border: 1px solid #2d5880;
}

.tab.hidden-tab {
  background: #4a2f1a !important;
  border: 1px solid #ff9800 !important;
  opacity: 0.9;
}

.tab.hidden-tab span b {
  color: #ffb74d !important;
}

.tab.hidden-tab::before {
  background: #ff9800 !important;
}

.tabVisibility {
  background: none;
  border: 0;
  color: #8094a9;
  padding: 0 4px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: .2s;
  align-self: center;
}

.tab:hover .tabVisibility {
  opacity: 1;
}

/* Keylog styles */
#keylogContentMain {
  line-height: 1.6;
}

/* PAGE-LOAD events - destaque azul */
.keystroke-event.pageload {
  background: #0f2a4a;
  border-left: 3px solid #2196F3;
  padding: 4px 8px;
  margin: 2px 0;
  color: #64B5F6;
  font-weight: 500;
}

/* Ações/tags especiais - destaque laranja */
.keystroke-event.action {
  background: #3a2410;
  border-left: 3px solid #FF9800;
  padding: 4px 8px;
  margin: 2px 0;
  color: #FFB74D;
  font-weight: 500;
}

/* Entrada de texto normal */
.keystroke-text {
  background: #0b1723;
  padding: 2px 4px;
  margin: 1px 0;
  color: #e6eef8;
}

/* Entrada de texto em campos (amarelo) */
.keystroke-input {
  background: #4a3f10;
  border-left: 2px solid #FDD835;
  padding: 4px 8px;
  margin: 2px 0;
  color: #FFD54F;
  font-weight: 500;
}

/* Separador de abas/URLs */
.keystroke-separator {
  background: #1a3a52;
  border-top: 1px solid #2d5880;
  padding: 8px 4px;
  margin: 6px 0;
  color: #71869c;
  font-size: 9px;
  font-style: italic;
}

/* Entrada de formulário detectada como senha */
.keystroke-password {
  background: #3a1a1a;
  border-left: 3px solid #FF6B6B;
  padding: 4px 8px;
  margin: 2px 0;
  color: #FF8A8A;
  font-family: monospace;
}

/* ============ INFO TABS PANEL ============ */
.info .infoTabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  height: 42px !important;
  border-bottom: 1px solid #1b2b3d;
  background: #0b1723;
}

.info .infoTabs button {
  border: 0;
  background: none;
  color: #71869c;
  font-size: 9px !important;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
  transition: all .2s;
  border-bottom: 2px solid transparent;
}

.info .infoTabs button:hover {
  color: #8ba6c4;
  background: rgba(255,255,255,0.03);
}

.info .infoTabs button.active {
  color: #f4d958 !important;
  border-bottom: 2px solid #f4d958 !important;
  background: rgba(244,217,88,0.05);
}

.info .infoPanel {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
}

.info .infoPanel::-webkit-scrollbar {
  width: 4px;
}
.info .infoPanel::-webkit-scrollbar-thumb {
  background: #20364d;
  border-radius: 2px;
}

/* Keylog */
.keylogSelect {
  width: 100%;
  padding: 6px 8px;
  background: #0b1723;
  border: 1px solid #20364d;
  color: #e6eef8;
  border-radius: 4px;
  font-size: 9px;
  cursor: pointer;
}
.keylogContent {
  font-size: 9px;
  background: #07121d;
  padding: 10px;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
  color: #b8ccdd;
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  border: 1px solid #1d3044;
}
.keylogContent:empty::before {
  content: 'Nenhuma digitação registrada';
  color: #63798f;
  font-style: italic;
}

/* Buttons genéricos */
.btnDanger {
  width: 100%;
  padding: 8px;
  background: #3a1414;
  border: 1px solid #752020;
  color: #ff6a6a;
  border-radius: 4px;
  font-size: 9px;
  cursor: pointer;
  transition: .2s;
  font-weight: 600;
}
.btnDanger:hover { background: #4a1a1a; }

.btnPrimary {
  width: 100%;
  padding: 8px;
  background: #10243a;
  border: 1px solid #2578ee;
  color: #7cb4ff;
  border-radius: 4px;
  font-size: 9px;
  cursor: pointer;
  transition: .2s;
  font-weight: 600;
}
.btnPrimary:hover { background: #163458; }

/* Tags */
.tags .tag {
  display: inline-block;
  background: #13273a;
  color: #86a0b8;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 8px;
  margin: 2px;
  cursor: pointer;
  transition: .2s;
  border: 1px solid transparent;
}
.tags .tag:hover {
  background: #1a3d5c;
  border-color: #2a5580;
  color: #f4d958;
}
.tags .tag.active {
  background: #1a3d5c;
  border-color: #f4d958;
  color: #f4d958;
}
.tags .addTag {
  background: transparent !important;
  border: 1px dashed #2a5580 !important;
  color: #6aa8f6 !important;
}
.tags .addTag:hover {
  background: rgba(37,120,238,0.1) !important;
}

/* Info sections com melhor spacing */
.info section {
  padding: 12px !important;
  border-top: 1px solid #1b2b3d;
}
.info section:first-child {
  border-top: 0;
}
.info label {
  color: #71869c;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: block;
  text-transform: uppercase;
}
.info dl div {
  display: flex;
  justify-content: space-between;
  margin: 6px 0;
  gap: 8px;
}
.info dt {
  color: #71869c;
  font-size: 9px;
}
.info dd {
  margin: 0;
  color: #e6eef8;
  font-size: 9px;
  text-align: right;
  word-break: break-word;
  max-width: 60%;
}
.detailGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.detailGrid > div {
  background: #07121d;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #1d3044;
}
.detailGrid label {
  font-size: 7px !important;
  margin-bottom: 4px !important;
  color: #63798f !important;
}
.detailGrid b {
  font-size: 10px !important;
  color: #e6eef8;
  display: block;
}
.detailGrid .green {
  color: #35d58a !important;
}

.selected {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  background: #07121d;
  border-radius: 6px;
  border: 1px solid #1d3044;
}
.selected b {
  display: block;
  font-size: 10px;
  color: #e6eef8;
}
.selected small {
  display: block;
  font-size: 8px;
  color: #71869c;
  margin-top: 3px;
}

.url {
  background: #07121d;
  border: 1px solid #1d3044;
  border-radius: 4px;
  padding: 8px;
  color: #8498aa;
  font-size: 8px;
  overflow-wrap: break-word;
  word-break: break-all;
  font-family: monospace;
  line-height: 1.4;
}

/* Aumentar largura painel info em telas grandes */
@media (min-width: 1400px) {
  .browserGrid {
    grid-template-columns: 220px minmax(400px, 1fr) 220px !important;
  }
}
@media (min-width: 1600px) {
  .browserGrid {
    grid-template-columns: 240px minmax(500px, 1fr) 260px !important;
  }
}

/* Tab actions structure */
.tab .tabContent {
  display: flex;
  gap: 7px;
  flex: 1;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
}

.tab .tabActions {
  display: flex;
  gap: 4px;
  align-items: center;
  opacity: 0;
  transition: .2s;
}

.tab:hover .tabActions,
.tab.active .tabActions,
.tab.selected .tabActions {
  opacity: 1;
}

.tab .tabActions span {
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: #8094a9;
  transition: .15s;
}

.tab .tabActions span:hover {
  background: #2b3d52;
  color: #e6eef8;
}

/* Client-active tab (yellow highlight) */
.tab.client-active .tabContent b {
  color: #f4d958 !important;
  font-weight: 700;
}

.tab.client-active {
  background: linear-gradient(90deg, rgba(244,217,88,0.05) 0%, rgba(244,217,88,0.15) 100%) !important;
  border-left: 2px solid #f4d958 !important;
}

.tab.client-active::after {
  content: '● VENDO';
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 6px;
  color: #f4d958;
  font-weight: bold;
  letter-spacing: 0.5px;
}

/* Hidden tab (eye toggle) - admin ainda vê e interage normalmente */
.tab.hidden-tab {
  background: rgba(199, 150, 106, 0.08) !important;
  border-left: 2px solid #c7966a !important;
  position: relative;
}

.tab.hidden-tab .tabContent b {
  color: #c7966a !important;
}

.tab.hidden-tab .tabContent b::before {
  content: '🙈 ';
}

.tab.hidden-tab::after {
  content: 'OCULTA';
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 6px;
  color: #c7966a;
  font-weight: bold;
  letter-spacing: 0.5px;
  background: rgba(199, 150, 106, 0.15);
  padding: 2px 4px;
  border-radius: 3px;
}

/* ============ MOBILE RESPONSIVE (≤ 900px) - v2 REDESIGNED ============ */
@media (max-width: 900px) {
  * { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
  html, body { overflow-x: hidden; max-width: 100vw; }
  body { font-size: 14px; }
  .app { display: flex; flex-direction: column; min-height: 100vh; grid-template-columns: none !important; }

  /* ═══ TOPBAR (só a sidebar principal, NÃO afeta aside.info) ═══ */
  .app > aside:not(.info) {
    position: sticky; top: 0; z-index: 100;
    width: 100%; height: auto; grid-column: 1 / -1;
    border-right: none; border-bottom: 1px solid #1b2b3d;
    padding: 8px 12px;
    display: flex; align-items: center; gap: 10px;
    background: rgba(9, 19, 31, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  /* Garantir que aside.info (keylog panel) apareça no mobile */
  aside.info {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    max-height: none;
    order: 3;
    border-radius: 12px;
    background: #0b1523;
    border: 1px solid #1b2b3d;
    overflow: hidden;
  }
  aside.info .infoPanel { display: block; padding: 0; }
  aside.info .infoPanel[style*="display:none"],
  aside.info .infoPanel[style*="display: none"] { display: none !important; }
  .brand { padding: 0; margin: 0; flex-shrink: 0; }
  .brand b { font-size: 13px; white-space: nowrap; }
  .brand small { display: none; }
  nav {
    display: flex !important; gap: 4px; flex-wrap: nowrap;
    flex: 1; overflow-x: auto; overflow-y: hidden;
    padding: 0; margin: 0;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  nav::-webkit-scrollbar { display: none; }
  nav button {
    padding: 8px 12px; margin: 0; font-size: 11px;
    white-space: nowrap; flex-shrink: 0;
    border-radius: 8px; background: transparent;
    color: #8ba6c4; border: 1px solid transparent;
    min-height: 40px; display: inline-flex; align-items: center; gap: 4px;
  }
  nav button.active {
    background: rgba(46, 128, 255, 0.18); color: #6da9f8;
    border-color: rgba(46, 128, 255, 0.4); font-weight: 600;
  }
  nav button i { font-size: 9px; padding: 2px 6px; border-radius: 10px; background: rgba(255,255,255,.06); }
  .server, .admin { display: none; }

  /* ═══ MAIN CONTENT ═══ */
  main { padding: 12px; grid-column: 1 / -1; overflow-x: hidden; }

  /* ═══ HEADER ═══ */
  header {
    flex-direction: column; align-items: stretch;
    gap: 10px; margin-bottom: 14px;
    padding: 0;
  }
  header > div:first-child { text-align: left; padding: 0; }
  header small { font-size: 10px; color: #63798f; letter-spacing: 1px; }
  h1 { font-size: 20px; margin: 4px 0 0; font-weight: 700; color: #e6eef8; }
  .actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .actions input {
    flex: 1 1 100%; min-width: 100%; font-size: 15px;
    padding: 12px 14px; border-radius: 10px;
    background: #0f1e2e; border: 1px solid #20364d; color: #e6eef8;
  }
  .actions button {
    flex: 1; min-height: 44px; font-size: 13px;
    padding: 10px 14px; border-radius: 10px; font-weight: 600;
  }

  /* ═══ METRICS 2x3 CARDS ═══ */
  .metrics {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 8px; margin-bottom: 14px;
  }
  .metrics article {
    padding: 12px; gap: 6px;
    border-radius: 12px;
    background: linear-gradient(135deg,#0f1e2e 0%,#0a1522 100%);
    border: 1px solid #20364d;
    display: flex; align-items: center;
  }
  .metrics article > *:first-child { font-size: 18px; flex-shrink: 0; opacity: .7; }
  .metrics article > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .metrics small { font-size: 9px; color: #63798f; letter-spacing: 0.8px; text-transform: uppercase; }
  .metrics b { font-size: 20px; font-weight: 700; color: #e6eef8; line-height: 1; }
  .metrics span { font-size: 9px; color: #8ba6c4; }

  /* ═══ WORKSPACE EMPILHADO ═══ */
  .workspace {
    display: flex; flex-direction: column;
    grid-template-columns: none !important;
    gap: 12px;
  }

  /* Máquinas: card colapsável */
  .machines {
    order: 1;
    max-height: 60vh; overflow-y: auto;
    border-radius: 12px; background: #0b1523;
    border: 1px solid #1b2b3d;
  }
  .machines .title { padding: 14px; height: auto; border-bottom: 1px solid #1b2b3d; }
  .machines .title b { font-size: 14px; }
  .machines .title small { font-size: 11px; color: #8ba6c4; display: block; margin-top: 2px; }
  .machines .search { padding: 10px 12px 0; }
  .machines .search input {
    width: 100%; padding: 10px 12px; font-size: 14px;
    border-radius: 8px; background: #07121d; border: 1px solid #20364d;
    color: #e6eef8;
  }
  .machines .chips {
    padding: 8px 12px; gap: 6px;
    overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .machines .chips::-webkit-scrollbar { display: none; }
  .machines .chips button {
    padding: 8px 14px; min-height: 36px; font-size: 11px;
    flex-shrink: 0; white-space: nowrap; border-radius: 20px;
  }
  .machineItem {
    padding: 12px 14px; margin: 4px 8px;
    border-radius: 10px; background: #0f1e2e;
    border: 1px solid #1b2b3d;
  }
  .machineItem.active { border-color: #6da9f8; background: rgba(46,128,255,.08); }
  .machineItem b { font-size: 13px; }
  .machineItem em { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
  .machineItem small { font-size: 10px; margin-top: 6px; color: #8ba6c4; display: block; }

  /* ═══ Browser (viewer principal) ═══ */
  .browser { order: 2; border-radius: 12px; overflow: hidden; background: #0b1523; border: 1px solid #1b2b3d; }
  .browserGrid { display: flex; flex-direction: column; grid-template-columns: none !important; min-height: 0; gap: 0; }

  /* Perfis Chrome */
  .profiles {
    border-right: none; border-bottom: 1px solid #1b2b3d;
    max-height: 240px; overflow-y: auto;
    padding: 10px; order: 1;
  }
  .subhead { padding: 8px 4px; }
  .subhead b { font-size: 12px; }
  .subhead small { font-size: 10px; color: #8ba6c4; }
  .tab { min-height: 48px; padding: 10px 12px; margin: 4px 0; border-radius: 8px; }
  .tab .tabContent { gap: 10px; }
  .tab .tabContent b { font-size: 12px !important; }
  .tab .tabContent small { font-size: 10px !important; margin-top: 3px; color: #8ba6c4; }
  .tab .tabActions { opacity: 1 !important; display: flex; gap: 4px; }
  .tab .tabActions span { padding: 8px 10px; font-size: 14px; border-radius: 6px; background: rgba(255,255,255,.04); }

  /* Viewer da tela remota */
  .viewer { order: 2; min-height: 400px; }
  .viewerHead {
    height: auto; padding: 10px 12px;
    flex-wrap: wrap; gap: 8px;
    border-bottom: 1px solid #1b2b3d;
  }
  .viewerHead > div:first-child { flex: 1 1 60%; min-width: 0; }
  .viewerHead b { font-size: 12px; }
  .viewerHead small { font-size: 10px; color: #8ba6c4; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .viewerHead > div:last-child { flex: 0 0 auto; display: flex; gap: 4px; }
  .viewerHead button {
    padding: 8px 12px; min-width: 42px; min-height: 42px;
    font-size: 14px; border-radius: 8px;
  }
  .latency { font-size: 10px; padding: 4px 8px; border-radius: 10px; background: rgba(255,255,255,.05); }
  .screen {
    height: 60vh; min-height: 360px;
    margin: 8px; border-radius: 10px;
    touch-action: none;
  }
  .chromeBar { height: 32px; font-size: 10px; padding: 8px 12px; gap: 6px; }
  .connection {
    height: auto; padding: 10px 12px; font-size: 10px;
    flex-wrap: wrap; gap: 6px; border-top: 1px solid #1b2b3d;
  }

  /* Input keyboard remoto (16px previne zoom iOS) */
  .keyboardInput {
    padding: 12px; gap: 8px;
    border-top: 1px solid #1b2b3d;
    display: flex; align-items: center;
  }
  .keyboardInput input {
    flex: 1; font-size: 16px; padding: 12px 14px;
    border-radius: 10px; min-height: 46px;
    background: #07121d; border: 1px solid #20364d; color: #e6eef8;
  }
  .keyboardInput button {
    padding: 12px 18px; font-size: 14px;
    min-height: 46px; border-radius: 10px;
    font-weight: 600; flex-shrink: 0;
  }

  /* ═══ INFO PANEL (Aba/Máquina/Keylog) ═══ */
  .info { order: 3; max-height: none; border-radius: 12px; overflow: hidden; background: #0b1523; border: 1px solid #1b2b3d; }
  .info .infoTabs {
    display: grid !important; grid-template-columns: 1fr 1fr 1fr !important;
    height: 48px !important; gap: 0;
    border-bottom: 1px solid #1b2b3d;
  }
  .info .infoTabs button {
    font-size: 12px !important; padding: 12px 4px;
    min-height: 48px; font-weight: 600;
    background: transparent; border: none;
    color: #8ba6c4;
  }
  .info .infoTabs button.active { color: #f4d958; border-bottom: 2px solid #f4d958; }
  .info section { padding: 14px !important; }
  .info label { font-size: 10px; color: #63798f; letter-spacing: 0.8px; text-transform: uppercase; }
  .info dt { font-size: 10px !important; color: #63798f; text-transform: uppercase; margin-bottom: 2px; }
  .info dd { font-size: 12px !important; color: #e6eef8; word-break: break-word; margin: 0 0 10px; }
  .info dl div { margin: 10px 0; }
  .selected { padding: 12px; background: #07121d; border-radius: 8px; }
  .selected b { font-size: 12px !important; }
  .selected small { font-size: 10px !important; color: #8ba6c4; }
  .detailGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .detailGrid > div {
    padding: 10px; border-radius: 8px;
    background: #07121d; border: 1px solid #16283c;
  }
  .detailGrid label { font-size: 9px !important; }
  .detailGrid b { font-size: 12px !important; word-break: break-word; }
  .url { font-size: 10px; padding: 10px; background: #07121d; border-radius: 8px; word-break: break-all; }
  .keylogContent {
    font-size: 11px; max-height: 320px; overflow-y: auto;
    padding: 8px; background: #07121d; border-radius: 8px;
  }
  .keylogSelect {
    width: 100%; font-size: 13px; padding: 10px 12px; min-height: 42px;
    border-radius: 8px; background: #0f1e2e; border: 1px solid #20364d; color: #e6eef8;
  }

  /* ═══ MACHINE HEAD ═══ */
  .machineHead {
    flex-direction: column; align-items: stretch;
    gap: 10px; padding: 14px;
    border-bottom: 1px solid #1b2b3d;
  }
  .machineHead > div:first-child { display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
  .machineHead h2 { font-size: 15px; margin: 0; line-height: 1.3; }
  .machineHead h2 i { font-size: 9px; padding: 3px 8px; border-radius: 10px; margin-left: 4px; }
  .machineHead > div:last-child { display: flex; gap: 8px; }
  .machineHead button {
    flex: 1; padding: 10px 14px; font-size: 12px;
    min-height: 42px; border-radius: 8px; font-weight: 600;
  }

  /* Machine Details (colapsável) */
  .machineDetails { margin: 8px 12px; padding: 12px; border-radius: 10px; }
  .machineDetails .detailsGrid { grid-template-columns: 1fr; gap: 8px; }

  /* ═══ CONTROL BAR ═══ */
  .control {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px; height: auto; border-radius: 0;
    border-bottom: 1px solid #1b2b3d;
  }
  .control > div:first-child {
    flex: 1 1 100%; padding-bottom: 8px;
    border-bottom: 1px solid #1b2b3d;
    margin-bottom: 4px;
  }
  .control small { font-size: 10px; color: #63798f; }
  .control b { font-size: 13px !important; }
  .control label {
    font-size: 12px; display: flex; align-items: center; gap: 8px;
    flex: 1 1 100%; justify-content: space-between;
    padding: 6px 0;
  }
  .switch { min-height: 26px; min-width: 44px; }
  .control button {
    min-height: 44px; flex: 1; min-width: 120px;
    font-size: 12px; border-radius: 10px; font-weight: 600;
  }

  /* ═══ RECENT SESSIONS TABLE ═══ */
  .recent { order: 3; overflow-x: auto; border-radius: 12px; }
  .recent table { font-size: 10px; min-width: 480px; }
  .recent th, .recent td { padding: 8px 6px; }

  /* ═══ MODAL FULL-SCREEN ═══ */
  .modal {
    width: calc(100vw - 24px);
    max-width: none;
    padding: 20px;
    border-radius: 14px;
    max-height: 90vh; overflow-y: auto;
  }
  .modalTitle b { font-size: 16px; }
  .modalTitle small { font-size: 11px; }
  .modal > label { font-size: 10px; color: #63798f; text-transform: uppercase; letter-spacing: 0.8px; }
  .modal > input {
    font-size: 16px; padding: 12px 14px;
    border-radius: 10px; min-height: 46px;
    background: #07121d; border: 1px solid #20364d; color: #e6eef8;
  }
  .modal footer { display: flex; gap: 8px; margin-top: 18px; }
  .modal footer button {
    flex: 1; padding: 14px; font-size: 14px;
    min-height: 48px; border-radius: 10px; font-weight: 600;
  }

  /* ═══ TOAST ═══ */
  #toast {
    right: 12px; left: 12px; bottom: 12px;
    text-align: center; padding: 14px;
    font-size: 13px; border-radius: 12px;
  }

  /* ═══ PERFIS OFFLINE ═══ */
  .offline-profiles-panel { padding: 0 !important; border-radius: 12px; background: #0b1523; border: 1px solid #1b2b3d; overflow: hidden; }
  .offline-profiles-panel > div.title {
    padding: 14px !important; flex-wrap: wrap; gap: 8px;
    border-bottom: 1px solid #1b2b3d;
  }
  .offline-profiles-panel > div.title b { font-size: 14px; }
  .offline-profiles-panel > div.title small { font-size: 11px; color: #8ba6c4; }
  #offlineProfilesList {
    display: grid !important; grid-template-columns: 1fr !important;
    padding: 12px !important; gap: 10px !important;
  }
  #offlineProfilesList > div {
    padding: 14px !important; border-radius: 12px !important;
    border: 1px solid #20364d !important;
  }
  #offlineProfilesList b { font-size: 13px !important; }
  #offlineProfilesList button {
    min-height: 46px !important; font-size: 12px !important;
    border-radius: 10px !important; font-weight: 600 !important;
  }

  /* ═══ CHROMIUM VIEWER ═══ */
  #__chromium_viewer__ > div:first-child {
    flex-wrap: wrap; padding: 10px !important; gap: 6px !important;
  }
  #__chromium_viewer__ input {
    font-size: 15px !important; padding: 10px !important;
    min-height: 42px !important; flex: 1 1 100% !important;
    order: 5; border-radius: 8px !important;
  }
  #__chromium_viewer__ button {
    padding: 10px 14px !important; min-height: 42px !important;
    font-size: 12px !important; border-radius: 8px !important;
  }
  #chrStatus { font-size: 10px !important; padding: 0 6px !important; flex: 1 1 100%; text-align: center; }
  #chrSidebar {
    position: fixed !important; top: 0; right: 0; bottom: 0;
    width: 85vw !important; max-width: 340px;
    z-index: 100001; box-shadow: -4px 0 24px rgba(0,0,0,0.6);
  }

  /* ═══ FERRAMENTAS ═══ */
  .tools-panel { padding: 0 !important; }
  .toolsContainer {
    grid-template-columns: 1fr !important;
    gap: 12px !important; padding: 12px !important;
  }
  .toolBtn {
    padding: 16px !important; font-size: 13px !important;
    min-height: 52px !important; border-radius: 12px !important;
    text-align: left;
  }
  .toolBtn b { font-size: 13px; }
  .toolBtn small { font-size: 11px; margin-top: 4px; display: block; color: #8ba6c4; }
  .toolPanel input, .toolPanel textarea, .toolPanel select {
    font-size: 15px !important; padding: 12px 14px !important;
    min-height: 46px !important; border-radius: 10px !important;
    width: 100%; box-sizing: border-box;
  }
  .toolPanel button {
    padding: 12px 20px !important; font-size: 14px !important;
    min-height: 46px !important; border-radius: 10px !important;
    font-weight: 600 !important;
  }
  .toolPanel > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important; gap: 10px !important;
  }

  /* ═══ CHIPS TAGS ═══ */
  .chips { flex-wrap: wrap; }
  .tags { flex-wrap: wrap; gap: 6px; }
  .tag { font-size: 11px; padding: 6px 10px; border-radius: 12px; }
}

/* ═══ EXTRA SMALL (≤ 480px) ═══ */
@media (max-width: 480px) {
  body { font-size: 13px; }
  main { padding: 10px; }
  .brand b { font-size: 12px; }
  nav button { font-size: 10px; padding: 8px 10px; min-height: 38px; }
  h1 { font-size: 17px; }
  .actions button { font-size: 12px; padding: 10px 12px; min-height: 42px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 6px; }
  .metrics article { padding: 10px; }
  .metrics b { font-size: 17px; }
  .metrics article > *:first-child { font-size: 16px; }
  .screen { height: 55vh; min-height: 300px; margin: 6px; }
  .machines { max-height: 50vh; }
  .profiles { max-height: 200px; }
  .keyboardInput { padding: 10px; }
  .modal { padding: 16px; }
  .info .infoTabs button { font-size: 11px !important; padding: 10px 4px; }
  .detailGrid { grid-template-columns: 1fr; }
  .machineHead button { font-size: 11px; padding: 10px 12px; }
  .control button { min-width: 100px; font-size: 11px; }
}

/* ═══ ORIENTAÇÃO LANDSCAPE MOBILE ═══ */
@media (max-height: 500px) and (orientation: landscape) {
  aside { padding: 6px 10px; }
  .brand { font-size: 0; margin-right: 4px; }
  .brand b { font-size: 10px; }
  main { padding: 8px; }
  .metrics { display: none; }
  header { flex-direction: row; margin-bottom: 8px; align-items: center; }
  h1 { font-size: 15px; }
  .actions { flex: 1; }
  .actions input { flex: 1 1 auto; min-width: 120px; }
  .screen { height: 70vh; min-height: 200px; }
  .workspace { display: grid; grid-template-columns: 240px 1fr; }
  .machines { max-height: 70vh; order: 1; }
  .browser { order: 2; }
  .info { max-height: 70vh; overflow-y: auto; }
}

/* Machine details panel */
.machineDetails{background:#0f1520;border:1px solid #1e2836;border-radius:10px;padding:14px 16px;margin:8px 16px 12px}
.machineDetails .detailsGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 20px}
.machineDetails .detailsGrid > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.machineDetails .detailsGrid small{color:#7c8ba1;font-size:11px;text-transform:uppercase;letter-spacing:0.5px}
.machineDetails .detailsGrid b{color:#e6edf7;font-size:13px;word-break:break-word;overflow-wrap:anywhere}

/* ═══ SEGURANÇA: BADGE [REDACTED] E TABELA DE KEYLOGS ═══ */

/* Badge de conteúdo redactado (laranja/vermelho) */
.redacted-badge {
  display: inline-block;
  background: rgba(255, 152, 0, 0.25);
  color: #ff9800;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  border: 1px solid rgba(255, 152, 0, 0.4);
  margin-right: 6px;
}

.redacted-badge:before { content: '🔒 '; }

.redacted-badge.critical {
  background: rgba(255, 106, 106, 0.2);
  color: #ff6a6a;
  border-color: rgba(255, 106, 106, 0.4);
}

.redacted-badge.critical:before { content: '🚨 '; }

/* Tabela de keylogs com segurança */
.keylogContent table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: 'Courier New', monospace;
}

.keylogContent thead {
  background: #0f2138;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #20364d;
}

.keylogContent th {
  padding: 8px;
  text-align: left;
  color: #6aa8f6;
  font-weight: 600;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-right: 1px solid #20364d;
}

.keylogContent th:last-child {
  border-right: none;
}

.keylogContent tbody tr {
  border-bottom: 1px solid #16283c;
  transition: background-color 0.15s;
}

.keylogContent tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.keylogContent td {
  padding: 6px 8px;
  color: #e6eef8;
  vertical-align: top;
}

.keylogContent td:nth-child(1) { color: #63798f; width: 90px; }  /* Timestamp */
.keylogContent td:nth-child(2) { color: #8ba6c4; width: 60px; }  /* Tab */
.keylogContent td:nth-child(3) { color: #8ba6c4; width: 120px; } /* Title */
.keylogContent td:nth-child(4) { color: #e6eef8; max-width: 300px; word-break: break-word; } /* Filtered Text */
.keylogContent td:nth-child(5) { text-align: center; width: 50px; } /* Password Field */
.keylogContent td:nth-child(6) { color: #8ba6c4; width: 100px; } /* User */

/* Célula com conteúdo redactado */
.keylogContent td[style*="background"] {
  background-color: rgba(255, 152, 0, 0.08) !important;
}

/* Password field indicator */
.password-indicator {
  display: inline-block;
  background: rgba(255, 152, 0, 0.15);
  color: #ff9800;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 8px;
  font-weight: 600;
}

.password-indicator:before { content: '🔐 '; }

/* Live indicator */
.keylog-live {
  color: #4ec9b0;
  font-size: 9px;
  font-weight: 600;
}

.keylog-live:before { content: '● '; }

/* Scroll da tabela */
.keylogContent::-webkit-scrollbar {
  width: 6px;
}

.keylogContent::-webkit-scrollbar-track {
  background: transparent;
}

.keylogContent::-webkit-scrollbar-thumb {
  background: #20364d;
  border-radius: 3px;
}

.keylogContent::-webkit-scrollbar-thumb:hover {
  background: #2a4a6a;
}

/* Empty state */
.keylogContent .empty-state {
  padding: 20px;
  text-align: center;
  color: #71869c;
  font-size: 11px;
}

.keylogContent .empty-state:before {
  content: '📭 ';
  font-size: 20px;
  display: block;
  margin-bottom: 8px;
}