@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* ======= BASE ======= */
body {
  background: #000;
  font-family: 'Share Tech Mono', monospace;
  color: #00ff99;
  overflow-x: hidden;
  min-height: 100vh;
  margin: 0;
  font-size: 16px;
}

p {
  text-align: center;
}

/* ====== CANVAS ====== */
canvas#bgCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* ===== LOGIN HUD ===== */
.login-container {
  position: fixed;
  z-index: 20;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(145deg, #050505, #0a0a0a);
  border: 2px solid #00ff99;
  box-shadow: 0 0 20px #00ff9977, 0 0 40px #00ff9944;
  padding: 38px 24px 26px 24px;
  border-radius: 12px;
  text-align: center;
  width: 94vw; max-width: 340px;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
}
.tooltip-login {
  width: 100%;
  background: #002222;
  color: #00ff99;
  border: 1px solid #00ff99;
  border-radius: 6px;
  font-size: 0.92rem;
  padding: 7px 10px;
  box-shadow: 0 0 12px #00ff9955;
  text-align: center;
  margin-bottom: 10px;
  animation: fadeInTooltip 0.6s;
}
@keyframes fadeInTooltip {
  from { opacity: 0; transform: translateY(-10px);}
  to { opacity: 1; transform: translateY(0);}
}
.login-container h1 { font-size: 2rem; text-shadow: 0 0 8px #00ff99;}
.login-container input {
  width: 100%;
  padding: 9px;
  background: #000;
  color: #00ff99;
  border: 1px solid #00ff99;
  border-radius: 6px;
  font-size: 1rem;
}
.login-container button {
  width: 100%;
  padding: 10px;
  background: #002222;
  border: 1.5px solid #00ff99;
  color: #00ff99;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 4px;
  transition: background .14s;
}
.login-container button:hover { background: #003333; }
.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ===== INTERFACE PRINCIPAL ===== */
.interface {
  padding-top: 110px; /* Ajuste dinâmico via JS */
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 120px;
  max-width: 980px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
  box-sizing: border-box;
}
.oculto { display: none !important; }

.logo {
  font-size: 2.2rem;
  font-family: 'Share Tech Mono', monospace;
  text-shadow: 0 0 5px #00ff99, 0 0 11px #00ff9955, 0 0 1px #00ff99;
  letter-spacing: 0.02em;
  line-height: 1.05;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  user-select: none;
  perspective: 350px;
  padding-bottom: 3px;
}

.h0s-glitch {
  color: #00ff99;
  text-shadow:
    0 0 2.5px #00ff99,
    0 0 6px #00ff99bb,
    1px 1px 0px #4fd3ff,
    -1px -1px 1px #ffaa00aa,
    0 1px 4px #00ffaa66;
  font-weight: bold;
  font-size: 1.17em;
  display: inline-block;
  transform: skewX(-8deg) scale(1.07) rotateY(-7deg);
  animation: h0sGlitchAnim 1.9s infinite alternate-reverse cubic-bezier(.79,-0.4,.37,1.31);
  filter: blur(0.13px) brightness(1.08);
  letter-spacing: 0.07em;
}

@keyframes h0sGlitchAnim {
  0%   { text-shadow: 0 0 2.5px #00ff99, 0 0 6px #00ff99bb, 1px 1px 0 #4fd3ff, -1px -1px 1px #ffaa00aa; transform: skewX(-8deg) scale(1.07) rotateY(-7deg);}
  18%  { text-shadow: 0 0 4.5px #00ffaa, 0 0 8px #4fd3ff, 2px 0px 0 #00ff99, -2px 0 1.5px #ffaa00aa; }
  41%  { text-shadow: 0 0 5px #4fd3ff, 0 0 7px #00ff99, 0 2px 2px #ffaa00, 0 -2px 1px #00ffaa; }
  60%  { text-shadow: 0 0 6px #ffaa00, 0 0 10px #00ffaa, -1px 1px 0 #ff55ff, 1px -1px 1px #00ff99; }
  77%  { text-shadow: 0 0 6px #00ff99, 0 0 8px #ffaa00, 1px -1px 0 #ff55ff, -1px 1px 1px #00ffaa; }
  100% { text-shadow: 0 0 2.5px #00ff99, 0 0 6px #00ff99bb, 1px 1px 0 #4fd3ff, -1px -1px 1px #ffaa00aa; transform: skewX(-8deg) scale(1.07) rotateY(-7deg);}
}

.h0s-cursor {
  margin-left: 2px;
  color: #00ffaa;
  text-shadow:
    0 0 2.5px #00ffaa,
    0 0 7px #00ffaa,
    0 1px 2px #fff8;
  font-weight: bold;
  font-size: 1.1em;
  animation: blink 1s steps(1) infinite, h0sCursorNeon 2.7s infinite alternate cubic-bezier(.66,-0.18,.45,1.17);
  filter: blur(0.06px) brightness(1.09);
  position: relative;
  top: 1.5px;
  left: 1.5px;
}
@keyframes h0sCursorNeon {
  0% { text-shadow: 0 0 2.5px #00ffaa, 0 0 7px #00ffaa, 0 1px 2px #fff8;}
  50% { text-shadow: 0 0 5px #00ffaa, 0 0 13px #00ffaa, 0 2px 3px #fff;}
  100% { text-shadow: 0 0 2.5px #00ffaa, 0 0 7px #00ffaa, 0 1px 2px #fff8;}
}

/* ===== TOP BAR ===== */
.top-bar {
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 4px 0;
  min-height: 55px;
  border-bottom: 2px solid #00ff99;
  background: linear-gradient(120deg, #021f1e 0%, #001d0f 60%, #002a1a 100%);
  background-size: 250% 250%;
  animation: hackerNeonMove 6s ease-in-out infinite;
  box-shadow: 0 0 12px #00ff99aa, 0 2px 10px #00ff9955, 0 -2px 10px #00ff9955;
}
@keyframes hackerNeonMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.top-bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 60%, #00ff9915 85%, transparent 100%);
  opacity: 0.12;
}
.logo {
  font-size: 1.3rem;
  text-shadow: 0 0 7px #00ff99;
  margin-bottom: 2px;
  text-align: center;
}
.main-bar-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 3px;
  justify-content: center;
  align-items: center;
}

/* ===== BOTÕES TOPBAR — PADRÃO HOME, INDIVIDUAIS E MAIS ARREDONDADOS ===== */

/* PADRÃO BASE PARA TODOS */
#btn-home,
#btn-ferramentas,
#btn-configs,
#btn-bot,
.sair-btn {
  min-width: 44px;
  min-height: 38px;
  padding: 9px 17px 9px 17px;
  border-radius: 13px;
  font-size: 1.01rem;
  font-weight: bold;
  letter-spacing: 0.01em;
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.13s;
  line-height: 1.18;
  vertical-align: middle;
  outline: none;
  border-width: 1.5px;
}

@media (max-width: 600px) {
  #btn-home,
  #btn-ferramentas,
  #btn-configs,
  #btn-bot,
  .sair-btn {
    padding: 7px 11px;
    font-size: 0.98rem;
    min-width: 36px;
    min-height: 32px;
    border-radius: 10px;
  }
}

/* ===== BOTÃO HOME — Laranja Hacker ===== */
#btn-home {
  background: linear-gradient(120deg, #382100 70%, #cc7500 100%) !important;
  color: #fff !important;
  border: 1.5px solid #ffa600 !important;
  box-shadow: 0 0 14px 2px #cc750055, 0 0 3px #ffaa00 inset;
  text-shadow: 0 1px 1px #000b, 0 0 7px #ffaa0044;
}
#btn-home::after {
  content: '';
  position: absolute;
  left: -80%; top: 0;
  width: 70%; height: 100%;
  background: linear-gradient(120deg, rgba(255,220,130,0.18) 10%, rgba(255,180,0,0.19) 60%, transparent 100%);
  filter: blur(1px);
  opacity: 0.88;
  transform: skewX(-20deg);
  transition: left 0.36s cubic-bezier(.53,1.4,.73,1), opacity 0.18s;
  z-index: 0;
  pointer-events: none;
}
#btn-home:hover::after, #btn-home:focus::after {
  left: 120%;
  opacity: 1;
}
#btn-home:hover, #btn-home:focus {
  background: linear-gradient(120deg, #502a00 60%, #ff9800 100%) !important;
  border-color: #ffaa00 !important;
  box-shadow: 0 0 24px 3px #ffaa0080, 0 0 8px #ff980033 inset;
  outline: 2px solid #ffaa00;
  transform: scale(1.06);
}

/* ======= CHAT GLOBAL hacker0S - VISUAL PREMIUM/ROBUSTO ======= */

/* Botão Chat Global */
.btn-chat {
  margin-top: 7px;
  background: linear-gradient(120deg, #24292f 70%, #2d323a 100%) !important;
  color: #c6d3e0 !important;
  border: 1.5px solid #6b7687 !important;
  border-radius: 13px;
  box-shadow: 0 0 14px 2px #292d3555, 0 0 3px #ffffff18 inset;
  text-shadow: 0 1px 1px #000b, 0 0 7px #383c4944;
  font-weight: bold;
  font-size: 1.02rem;
  padding: 9px 17px 9px 17px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 44px;
  min-height: 38px;
  line-height: 1.14;
  transition: background 0.17s, border-color 0.17s, box-shadow 0.17s, color 0.13s, transform 0.13s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  outline: none;
  user-select: none;
}
.btn-chat::after {
  content: '';
  position: absolute;
  left: -80%; top: 0;
  width: 70%; height: 100%;
  background: linear-gradient(120deg, rgba(220,220,220,0.12) 15%, rgba(120,120,140,0.09) 60%, transparent 100%);
  filter: blur(1px);
  opacity: 0.57;
  transform: skewX(-20deg);
  transition: left 0.38s cubic-bezier(.53,1.4,.73,1), opacity 0.19s;
  z-index: 0;
  pointer-events: none;
}
.btn-chat:hover::after, .btn-chat:focus::after {
  left: 120%;
  opacity: 1;
}
.btn-chat:hover, .btn-chat:focus {
  background: linear-gradient(120deg, #353b45 70%, #434d56 100%) !important;
  color: #f8fafc !important;
  border-color: #d1d5db !important;
  box-shadow: 0 0 22px 4px #d1d5db22, 0 0 7px #fff3 inset;
  outline: 2.5px solid #d1d5db !important;
  outline-offset: 1.5px;
  transform: scale(1.06);
}
.btn-chat:active {
  background: linear-gradient(120deg, #23272e 70%, #23272e 100%) !important;
  color: #fff !important;
  border-color: #b5bcc9 !important;
  outline: 2px solid #b5bcc9 !important;
}
.btn-chat:focus-visible {
  outline: 2.5px solid #d1d5db !important;
  outline-offset: 2px;
}

#chat-badge {
  display: none;
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ff5555;
  color: #fff;
  font-size: 0.70em;      
  font-weight: bold;
  border-radius: 7px;
  padding: 0px 3px;
  min-width: 10px;
  height: 14px;
  line-height: 14px;
  box-shadow: 0 0 4px #ff5555a0;
  z-index: 10;
  text-align: center;
  pointer-events: none;
}

/* ===== Botão Vassoura (Limpar chat local) ===== */
#limpar-chat-btn {
  background: none;
  border: none;
  color: #4fd3ff;
  font-size: 1.14em;
  margin-left: 2px;
  cursor: pointer;
  opacity: 0.80;
  transition: opacity .13s, filter .19s;
  filter: drop-shadow(0 1px 3px #4fd3ff88);
  border-radius: 7px;
  outline: none;
  padding: 2px 7px;
}
#limpar-chat-btn:hover, #limpar-chat-btn:focus {
  opacity: 1;
  filter: drop-shadow(0 2px 6px #00ffaa88);
  background: #17202a;
}

/* ===== Card do Chat Flutuante ===== */
.chat-box {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) scale(0.95);
  z-index: 999;
  min-width: 335px;
  max-width: 98vw;
  background: linear-gradient(120deg,#101520 70%,#161b22 100%);
  border-radius: 18px;
  box-shadow: 0 4px 44px #021f3366, 0 1.5px 16px #4fd3ff44;
  border: 2.5px solid #232f44;
  display: flex !important;
  flex-direction: column;
  opacity: 1;
  transition: all .23s cubic-bezier(.77,-0.07,.45,1.18);
  animation: chatShow 0.36s cubic-bezier(.44,-0.17,.42,1.18);
}
@keyframes chatShow {
  from { opacity: 0; transform: translateX(-50%) translateY(90px) scale(0.86);}
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(0.98);}
}
.chat-box.oculto { 
  display: none !important;   /* <-- PATCH CORRETIVO! */
  opacity: 0; 
  pointer-events: none; 
  transform: translateX(-50%) scale(0.7); 
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #021f33;
  color: #4fd3ff;
  border-radius: 18px 18px 0 0;
  padding: 7px 14px;
  font-weight: bold;
  font-size: 1.13em;
  border-bottom: 1.5px solid #232f44;
  user-select: none;
}
.close-btn {
  background: none;
  border: none;
  color: #ff5555;
  font-size: 1.3em;
  cursor: pointer;
  margin-left: -150px;
  transition: color .18s;
  opacity: 0.85;
}
.close-btn:hover, .close-btn:focus {
  color: #ffaa00;
  opacity: 1;
}

/* ===== Mensagens do Chat ===== */
.chat-messages {
  max-height: 210px;
  min-height: 60px;
  overflow-y: auto;
  padding: 12px;
  color: #b7e7ff;
  font-size: 0.98em;
  font-family: 'Share Tech Mono', monospace;
  background: linear-gradient(180deg, #101520 85%, #161b22 100%);
  border-radius: 0 0 15px 15px;
  box-shadow: 0 0 7px #021f3333 inset;
  scrollbar-width: thin;
  scrollbar-color: #4fd3ff #101520;
}
.chat-messages::-webkit-scrollbar {
  width: 4px;
  background: #101520;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: #4fd3ff;
  border-radius: 4px;
}

/* ===== Input/Área do Chat ===== */
.chat-input-area {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 0 0 15px 15px;
  padding: 11px 14px 9px 14px;
  background: #17202a;
  border-top: 1.5px solid #232f44;
}
#chat-input {
  flex: 1;
  border-radius: 8px;
  border: 1.5px solid #4fd3ff66;
  padding: 7px 10px;
  font-size: 1.08em;
  background: #101520;
  color: #fff;
  transition: border .12s, box-shadow .13s;
  box-shadow: 0 0 6px #4fd3ff33 inset;
  outline: none;
}
#chat-input:focus {
  border: 1.5px solid #4fd3ff;
  outline: none;
  box-shadow: 0 0 10px #00ffaa22;
}

/* ===== Botões chat input: emoji, enviar ===== */
.emoji-btn,
.send-btn {
  background: linear-gradient(120deg, #101520 70%, #161b22 100%);
  border: 1.5px solid #232f44;
  font-size: 1.18em;
  cursor: pointer;
  color: #4fd3ff;
  margin-left: 2px;
  border-radius: 10px;
  font-weight: bold;
  box-shadow: 0 1px 7px #232f4466, 0 0 5px #00ffaa22 inset;
  transition: 
    background .17s, 
    border-color .17s, 
    box-shadow .17s, 
    color .13s, 
    transform .14s;
  padding: 7px 15px;
  outline: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.emoji-btn:hover, .emoji-btn:focus,
.send-btn:hover, .send-btn:focus {
  color: #4fd3ff;
  background: linear-gradient(120deg, #232f44 80%, #18243a 100%);
  border-color: #4fd3ff;
  box-shadow: 0 0 18px #232f44cc, 0 0 12px #00ffaa44 inset;
  transform: scale(1.06);
}

/* ===== Emoji Picker Popup ===== */
.emoji-popup {
  position: absolute;
  background: #101520;
  border: 2px solid #4fd3ff;
  border-radius: 12px;
  box-shadow: 0 0 14px #4fd3ff66;
  padding: 6px 10px;
  display: flex;
  gap: 6px;
  z-index: 9999;
  flex-wrap: wrap;
  top: 0;
  left: 0;
  min-width: 200px;
  max-width: 96vw;
  max-height: 180px;
  overflow-y: auto;
  animation: emojiPopAnim .16s;
}
@keyframes emojiPopAnim {
  from { opacity: 0; transform: scale(0.8);}
  to   { opacity: 1; transform: scale(1);}
}
.emoji-popup .emoji-item {
  background: none;
  border: none;
  font-size: 1.18em;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 6px;
  transition: background .14s, box-shadow .14s;
  outline: none;
  color: #4fd3ff;
}
.emoji-popup .emoji-item:hover,
.emoji-popup .emoji-item:focus {
  background: #232f44;
  outline: 2px solid #4fd3ff;
  color: #00ffaa;
  box-shadow: 0 0 6px #00ffaa55;
}

/* ===== Mensagem do chat global (flutuante) ===== */
.chat-msg-global {
  font-size: 0.92em;
  color: #8ebff0;
  background: #101a26;
  border-radius: 7px;
  padding: 6px 9px;
  margin-bottom: 4px;
  word-break: break-word;
  box-shadow: 0 0 9px #000a inset;
  transition: background 0.18s, color 0.13s;
  border-left: 3px solid #4fd3ff33;
  display: block;
}
.chat-msg-global b {
  font-size: 1.00em;
  color: #29d66b;
  font-weight: bold;
  text-shadow: 0 0 3px #29d66b88, 0 0 5px #29d66b44;
}
.chat-msg-global:hover {
  background: #18243a;
  color: #b4d4f7;
  box-shadow: 0 0 14px #4fd3ff44 inset;
}

/* ===== Responsivo chat ===== */
@media (max-width: 600px) {
  .chat-box { min-width: 97vw; left: 2vw; transform: scale(0.97);}
  .chat-header { font-size: 1.01em; padding: 7px 7px;}
  .chat-msg-global { font-size: 0.95em; padding: 5px 5px;}
  .chat-input-area { padding: 7px 7px 7px 7px; gap: 3px;}
  #chat-input { font-size: 1em; padding: 7px 7px;}
  .emoji-popup { min-width: 140px; padding: 4px 5px; gap: 3px; }
}

/* ===== Acessibilidade ===== */
.btn-chat:focus-visible,
.close-btn:focus-visible,
#limpar-chat-btn:focus-visible,
.emoji-btn:focus-visible,
.send-btn:focus-visible,
.emoji-popup .emoji-item:focus-visible {
  outline: 2.5px solid #00ffaa !important;
  outline-offset: 2px;
}

/* ===== BOTÃO FERRAMENTAS — Verde Neon ===== */
#btn-ferramentas {
  background: linear-gradient(120deg, #001c14 90%, #00ff99 100%) !important;
  color: #00ff99 !important;
  border: 1.5px solid #00ff99 !important;
  box-shadow: 0 0 14px 2px #00ff9955, 0 0 3px #00ff99 inset;
  text-shadow: 0 1px 1px #002a1a99, 0 0 7px #00ff9944;
}
#btn-ferramentas::after {
  content: '';
  position: absolute;
  left: -80%; top: 0;
  width: 70%; height: 100%;
  background: linear-gradient(120deg, rgba(0,255,153,0.13) 20%, rgba(51,255,170,0.13) 60%, transparent 100%);
  filter: blur(1px);
  opacity: 0.90;
  transform: skewX(-20deg);
  transition: left 0.36s cubic-bezier(.53,1.4,.73,1), opacity 0.18s;
  z-index: 0;
  pointer-events: none;
}
#btn-ferramentas:hover::after, #btn-ferramentas:focus::after {
  left: 120%;
  opacity: 1;
}
#btn-ferramentas:hover, #btn-ferramentas:focus {
  background: linear-gradient(120deg, #003c2a 70%, #00ffaa 100%) !important;
  border-color: #33ffaa !important;
  box-shadow: 0 0 24px 3px #33ffaa80, 0 0 8px #00ffaacc inset;
  outline: 2px solid #33ffaa;
  transform: scale(1.06);
}

/* ===== BOTÃO CONFIG — Verde Config ===== */
#btn-configs {
  background: linear-gradient(120deg, #002a2a 80%, #00ff99 100%) !important;
  color: #fff !important;
  border: 1.5px solid #00ff99 !important;
  box-shadow: 0 0 14px 2px #33ffaa44, 0 0 3px #00ff99 inset;
  text-shadow: 0 1px 1px #002a2a99, 0 0 7px #33ffaa44;
}
#btn-configs::after {
  content: '';
  position: absolute;
  left: -80%; top: 0;
  width: 70%; height: 100%;
  background: linear-gradient(120deg, rgba(0,255,153,0.10) 20%, rgba(51,255,170,0.13) 60%, transparent 100%);
  filter: blur(1px);
  opacity: 0.85;
  transform: skewX(-20deg);
  transition: left 0.36s cubic-bezier(.53,1.4,.73,1), opacity 0.18s;
  z-index: 0;
  pointer-events: none;
}
#btn-configs:hover::after, #btn-configs:focus::after {
  left: 120%;
  opacity: 1;
}
#btn-configs:hover, #btn-configs:focus {
  background: linear-gradient(120deg, #014f36 70%, #33ffaa 100%) !important;
  border-color: #33ffaa !important;
  box-shadow: 0 0 24px 3px #33ffaa80, 0 0 8px #00ffaacc inset;
  outline: 2px solid #33ffaa;
  transform: scale(1.06);
}

/* ===== BOTÃO BOT — Azul Ciano ===== */
#btn-bot {
  background: linear-gradient(120deg, #0c1933 80%, #4fd3ff 100%) !important;
  color: #4fd3ff !important;
  border: 1.5px solid #4fd3ff !important;
  box-shadow: 0 0 14px 2px #4fd3ff55, 0 0 3px #4fd3ff33 inset;
  text-shadow: 0 1px 1px #15356066;
}
#btn-bot::after {
  content: '';
  position: absolute;
  left: -80%; top: 0;
  width: 70%; height: 100%;
  background: linear-gradient(120deg, rgba(79,211,255,0.13) 20%, rgba(33,150,243,0.14) 60%, transparent 100%);
  filter: blur(1px);
  opacity: 0.92;
  transform: skewX(-22deg);
  transition: left 0.38s cubic-bezier(.53,1.4,.73,1), opacity 0.21s;
  z-index: 0;
  pointer-events: none;
}
#btn-bot:hover::after, #btn-bot:focus::after {
  left: 115%;
  opacity: 1;
}
#btn-bot:hover, #btn-bot:focus {
  background: linear-gradient(120deg, #153560 70%, #2196f3 100%) !important;
  color: #fff !important;
  border-color: #2196f3 !important;
  box-shadow: 0 0 19px #2196f355;
  outline: 2px solid #2196f3;
  transform: scale(1.06);
}

/* ===== BOTÃO SAIR — Vermelho Hacker ===== */
.sair-btn {
  background: linear-gradient(120deg, #2b0000 80%, #ff5555 100%) !important;
  color: #ff5555 !important;
  border: 1.5px solid #ff5555 !important;
  box-shadow: 0 0 14px 2px #ff555555, 0 0 3px #ff888844 inset;
  text-shadow: 0 1px 1px #900a, 0 0 7px #ff555555;
}
.sair-btn::after {
  content: '';
  position: absolute;
  left: -80%; top: 0;
  width: 70%; height: 100%;
  background: linear-gradient(120deg, rgba(255,85,85,0.18) 10%, rgba(255,55,55,0.13) 60%, transparent 100%);
  filter: blur(1px);
  opacity: 0.82;
  transform: skewX(-20deg);
  transition: left 0.36s cubic-bezier(.53,1.4,.73,1), opacity 0.18s;
  z-index: 0;
  pointer-events: none;
}
.sair-btn:hover::after, .sair-btn:focus::after {
  left: 120%;
  opacity: 1;
}
.sair-btn:hover, .sair-btn:focus {
  background: linear-gradient(120deg, #900 80%, #ff5555 100%) !important;
  color: #fff !important;
  border-color: #ff5555 !important;
  box-shadow: 0 0 24px 3px #ff555580, 0 0 8px #ff555544 inset;
  outline: 2px solid #ff5555;
  transform: scale(1.06);
}

/* ===== FOCUS ACESSIBILIDADE ===== */
button:focus, input:focus, .btn:focus, .copy-btn:focus, .bot-tip-item:focus, .bot-btn-azul:focus, .bot-inputbox:focus {
  outline: 2px solid #00ffaa;
  outline-offset: 2px;
}
a:focus { outline: 2px solid #ffaa00; outline-offset: 2px; }

/* ===== CLASSES UTILITÁRIAS ===== */
.text-center { text-align: center !important; }
.mt-1 { margin-top: 8px !important; }
.mb-1 { margin-bottom: 8px !important; }
.mt-2 { margin-top: 16px !important; }
.mb-2 { margin-bottom: 16px !important; }
.p-2 { padding: 16px !important; }

.analista {
  color: #00ff99;
  font-size: 1.08rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  font-family: 'Share Tech Mono', monospace;
  background: linear-gradient(120deg, #022b1d 80%, #0d2a15 100%, #00ff99 120%);
  background-size: 180% 180%;
  animation: analistaHackBgMove 4.2s infinite alternate cubic-bezier(.66,-0.18,.45,1.17), analistaGlitchBg 1.7s infinite steps(2, end);
  border-radius: 8px;
  padding: 7px 7px 6px 7px;
  margin: 6px 0 2px 0;
  text-align: center;
  box-shadow:
    0 3px 14px #00ff9930 inset,
    0 0 2px #00ffaa22;
  border-top: 1px solid #00ffaa33;
  border-bottom: 1px solid #00ffaa33;
  text-shadow:
    0 0 1.5px #00ff99,
    0 1px 0 #111,
    1px 1px 0px #4fd3ff44,
    -1px -1px 1.2px #ffaa0033;
  user-select: text;
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
}

@keyframes analistaHackBgMove {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 55%; }
}

@keyframes analistaGlitchBg {
  0% {
    filter: none;
    /* ligeiro offset no background para simular "quebra" */
    background-position: 0% 50%;
  }
  12% {
    filter: hue-rotate(-8deg) brightness(1.08) blur(0.3px);
    background-position: 7% 45%;
  }
  26% {
    filter: hue-rotate(8deg) brightness(0.98) blur(0.2px);
    background-position: 17% 60%;
  }
  32% {
    filter: none;
    background-position: 12% 58%;
  }
  60% {
    filter: hue-rotate(-10deg) brightness(1.12) blur(0.4px);
    background-position: 22% 55%;
  }
  78% {
    filter: none;
    background-position: 0% 50%;
  }
  100% {
    filter: none;
    background-position: 0% 50%;
  }
}

/* ===== ESTILO DO SALDO =====*/
.analista-saldo {
  display: inline-block;
  background: linear-gradient(120deg, #061610 70%, #012012 100%);
  color: #00ff99;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.91rem;        /* Bem menor! */
  font-weight: bold;
  border-radius: 5px;
  padding: 2px 9px 2px 9px;  /* Compacto */
  margin: 0 0 0 7px;
  box-shadow: 0 1px 4px #00ff9930 inset, 0 0 1px #00ff9922;
  border: 1px solid #008c5544;
  letter-spacing: 0.04em;
  text-shadow: 0 0 1.2px #00ff9950;
  user-select: text;
  min-width: 41px;
  vertical-align: middle;
  transition: background 0.19s, color 0.13s;
}
.analista-saldo .analista-money {
  color: #00ff99;
  font-size: 0.96em;
  font-weight: bold;
  letter-spacing: 0.01em;
}
.analista-saldo #saldo-num {
  color: #caffea;
  font-weight: bold;
  font-size: 0.97em;
  letter-spacing: 0.01em;
  text-shadow: 0 0 1px #00ff9966;
}


/* ===== MENU LATERAL ===== */
.side-menu {
  position: fixed;
  left: -340px;
  top: 0; bottom: 0;
  width: 290px;
  background: #010b09;
  border-right: 2px solid #00ff99;
  box-shadow: 8px 0 20px #00ff9950;
  z-index: 999;
  display: flex;
  flex-direction: column;
  transition: left 0.33s cubic-bezier(.68,-0.55,.27,1.55);
  overflow-y: auto;
  max-height: calc(100vh - 44px);
  padding-bottom: 56px;
}
.side-menu.aberta { left: 0; }
.side-menu.aberta::after {
  content: "";
  position: fixed;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.33);
  z-index: -1;
  pointer-events: none;
}
.side-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 16px 6px 100px;
  font-size: 1.09rem;
  color: #00ff99;
  font-weight: bold;
  border-bottom: 1.5px solid #00ff99;
  background: #011916;
  box-shadow: 0 1px 7px #00ff9955;
}
.close-side {
  background: radial-gradient(ellipse at center, #7a0513 70%, #340008 100%);
  border: none;
  color: #ff2a4d;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  margin-left: 8px;
  padding: 3px 8px 3px 8px;
  border-radius: 50%;
  box-shadow: 0 0 8px 2px #a9001d, 0 0 12px #ff003320;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 28px;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.close-side:hover {
  background: radial-gradient(ellipse at center, #a9001d 80%, #7a0513 100%);
  color: #fff;
  box-shadow: 0 0 12px 4px #ff0033, 0 0 24px #ff003355;
}
.side-menu button:not(.close-side) {
  position: relative;
  background: linear-gradient(120deg, #001c14 90%, #00ff99 100%) !important;
  color: #00ff99 !important;
  border: 1.5px solid #00ff99 !important;
  border-radius: 7px;
  padding: 6px 8px 6px 8px;
  font-size: 0.89em;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, color 0.14s, transform 0.14s;
  text-align: left;
  box-shadow: 0 0 10px 1px #00ff9955, 0 0 2px #00ff99 inset;
  text-shadow: 0 1px 1px #002a1a99, 0 0 7px #00ff9944;
  width: auto;
  min-width: 48px;
  margin-bottom: 7px;
  margin-right: 4px;
  display: inline-block;
  max-width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
  z-index: 1;
}
.side-menu button:not(.close-side)::after {
  content: '';
  position: absolute;
  left: -80%; top: 0;
  width: 70%; height: 100%;
  background: linear-gradient(120deg, rgba(0,255,153,0.13) 20%, rgba(51,255,170,0.13) 60%, transparent 100%);
  filter: blur(1px);
  opacity: 0.90;
  transform: skewX(-20deg);
  transition: left 0.36s cubic-bezier(.53,1.4,.73,1), opacity 0.18s;
  z-index: 0;
  pointer-events: none;
}
.side-menu button:not(.close-side):hover::after,
.side-menu button:not(.close-side):focus::after {
  left: 120%;
  opacity: 1;
}
.side-menu button:not(.close-side):hover,
.side-menu button:not(.close-side):focus {
  background: linear-gradient(120deg, #003c2a 70%, #00ffaa 100%) !important;
  color: #fff !important;
  border-color: #33ffaa !important;
  box-shadow: 0 0 24px 3px #33ffaa80, 0 0 8px #00ffaacc inset;
  outline: 2px solid #33ffaa;
  transform: scale(1.045);
}

/* SEARCH BAR: desconecta visualmente */
#search-tools {
  width: 90%;
  margin: 12px auto 18px auto;  /* <-- AUMENTE o margin-bottom para separar! */
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid #00ff99;
  background: #000;
  color: #00ff99;
  font-size: 1rem;
  display: block;
  box-shadow: 0 2px 14px #00ff9955;
}
.categoria-bloco { margin-bottom: 18px; }
.categoria-title {
  font-weight: bold;
  font-size: 1.06rem;
  color: #00ff99;
  cursor: pointer;
  margin-left: 3px;
  margin-bottom: 4px;
  text-shadow: 0 0 4px #00ff9966;
  display: flex; align-items: center;
}
.categoria-lista {
  margin-left: 12px;
  transition: max-height 0.2s;
  overflow: hidden;
}
.categoria-bloco.fechada .categoria-lista {
  max-height: 0;
  padding: 0;
  opacity: 0.7;
}
.categoria-bloco .categoria-lista {
  max-height: 500px;
  padding-bottom: 6px;
  opacity: 1;
}
.categoria-title .seta {
  display: inline-block;
  transition: transform 0.2s;
  margin-right: 6px;
}
.categoria-bloco.fechada .categoria-title .seta {
  transform: rotate(-90deg);
}

/* ===== MODAL CONFIGURAÇÕES ===== */
.modal-configs {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.66);
  z-index: 400;
  align-items: center; justify-content: center;
}
.modal-configs.aberta { display: flex; }
.modal-content {
  background: linear-gradient(145deg, #090909, #181818 80%);
  border: 2px solid #00ff99;
  border-radius: 13px;
  box-shadow: 0 0 33px #00ff9955, 0 0 80px #00383344;
  padding: 34px 28px 26px 28px;
  min-width: 300px;
  position: relative;
  animation: fadeInModal 0.3s;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
#modal-analista {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
}
#modal-analista > div {
  text-align: center;
  margin-bottom: 0;
  background: #011916;
  border: 1.5px solid #00ff99;
  border-radius: 8px;
  padding: 17px 10px 13px 10px;
  box-shadow: 0 0 12px #00ff9955;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
}
#nome-analista-config {
  font-size: 1.16em;
  color: #00ff99;
  font-weight: bold;
  background: #000;
  border-radius: 6px;
  padding: 5px 18px 4px 18px;
  border: 1.3px dashed #00ff99;
  box-shadow: 0 0 8px #00ff9966;
}
@keyframes fadeInModal {
  from { opacity: 0; transform: translateY(-24px);}
  to { opacity: 1; transform: translateY(0);}
}
.close-modal {
  background: none;
  border: none;
  color: #ff5555;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 13px;
  right: 16px;
  padding: 3px 8px 3px 8px;
  border-radius: 50%;
  box-shadow: 0 0 8px 2px #a9001d, 0 0 12px #ff003320;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 28px;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  background: radial-gradient(ellipse at center, #7a0513 70%, #340008 100%);
}
.close-modal:hover {
  background: radial-gradient(ellipse at center, #a9001d 80%, #7a0513 100%);
  color: #fff;
  box-shadow: 0 0 12px 4px #ff0033, 0 0 24px #ff003355;
}
.modal-title { 
  font-size: 1.15rem; 
  color: #00ff99; 
  font-weight: bold;
  text-align: center;
  display: block;
}
.modal-buttons { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  margin: 14px 0 8px 0;
  width: 100%;
  max-width: 320px;
}
.modal-info { 
  color: #33ffaa; 
  font-size: 0.92rem; 
  border-top: 1px solid #00ff99; 
  margin-top: 14px; 
  padding-top: 10px;
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.modal-info strong { color: #00ff99; }

/* ===== HUD PRINCIPAL ===== */
.main-cards {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 13px;
  justify-content: center;
}
.card {
  background: linear-gradient(145deg, #0a0a0a, #050505);
  border: 2px solid #00ff99;
  border-radius: 14px;
  box-shadow: 0 0 10px #00ff99cc, 0 0 40px #002c1180, inset 0 0 8px #00ff9933;
  padding: 18px;
  flex: 1 1 49%;
  min-width: 260px;
  max-width: 98vw;
  box-sizing: border-box;
  margin-bottom: 12px;
  transition: box-shadow .17s, transform .17s;
}
.card:hover {
}
.tool-area { 
  min-height: 75px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}
.output {
  min-height: 80px;
  max-height: none;
  overflow: visible;
  word-break: break-word;
  box-sizing: border-box;
  display: none;
}

/* ===== HASHES ===== */
#hashResults {
  word-break: break-all;
  white-space: pre-wrap;
  max-width: 100%;
}

/* ===== BASE64 VISUAL GRID ===== */
.base64-multi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 12px;
  align-items: flex-start;
  margin-bottom: 5px;
}
.base64-multi-grid label {
  font-weight: bold;
  color: #00ff99;
  font-size: 0.97rem;
  margin-bottom: 2px;
}
.base64-multi-grid textarea {
  width: 100%;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.97rem;
  background: #000;
  color: #00ff99;
  border: 1px solid #00ff99;
  border-radius: 6px;
  padding: 5px;
  resize: vertical;
  min-height: 28px;
  max-height: 70px;
  margin-bottom: 2px;
}
.base64-multi-grid .copy-btn {
  margin-top: 2px;
  width: 100%;
  font-size: 0.89rem;
  padding: 3px 0;
}
.base64-multi-row {
  display: flex;
  gap: 12px;
  margin: 0 0 8px 0;
}
.base64-multi-row > div {
  flex: 1 1 0;
}
.base64-multi-decode {
  margin-top: 5px;
  display: flex;
  gap: 10px;
}
.base64-multi-decode > div {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}
.base64-multi-decode textarea {
  min-height: 32px;
  max-height: 70px;
}

/* ===== RESPONSIVO ===== */
@media (max-width: 1100px) {
  .main-cards { flex-direction: column; gap: 12px; }
  .card { flex: 1 1 100%; min-width: 0;}
  .interface { padding-left: 2vw; padding-right: 2vw; }
  .side-menu { width: 98vw; max-width: 340px; }
  .modal-content { min-width: 85vw; }
  .output { min-height: 100px; }
}
@media (max-width: 800px) {
  .output { min-height: 120px; }
  .interface { padding-bottom: 135px; }
}
@media (max-width: 700px) {
  .base64-multi-grid { grid-template-columns: 1fr; }
  .base64-multi-row { flex-direction: column; gap: 8px;}
  .base64-multi-decode { flex-direction: column; gap: 7px;}
}
@media (max-width: 600px) {
  .output { min-height: 180px; }
  .interface { padding-bottom: 150px; }
  .modal-content { min-width: 95vw; }
  .card { padding: 7px; }
}
@media (max-width: 400px) {
  .card { padding: 5px; }
  .modal-content { padding: 8px 2px; }
}

/* ===== TERMINAL ===== */
.terminal {
  background: #000000;
  border: 2px solid #00ff99;
  border-radius: 8px;
  padding: 12px;
  height: 280px;
  min-height: 280px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 1rem;
  margin-bottom: 12px;
  box-shadow: 0 0 10px #00ff99aa inset;
  white-space: pre-wrap;
  transition: box-shadow .22s;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: #00ff99 #000;
}
.terminal::-webkit-scrollbar {
  width: 4px;
  background: #000;
}
.terminal::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#00ff99 40%,#002a1a 100%);
  border-radius: 8px;
  box-shadow: 0 0 6px #00ff9977 inset;
}
.terminal .info { color: #00ffff; }
.terminal .erro { color: #ff5555; }
.terminal .sucesso { color: #55ff55; }

.hks-terminal-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
  padding: 2px 0 2px 0;
  border-radius: 6px;
  box-shadow: 0 2px 10px #001b0b1c;
  background: linear-gradient(90deg,#021a16 0%,#00000000 100%);
  animation: hksFadeInTerm .45s;
  cursor: pointer;
  min-width: 0;
  width: 100%;
  word-break: break-word;
  position: relative;
  border-left: 3px solid transparent;
  transition: background .13s, box-shadow .13s, border-color .18s;
}
.hks-terminal-line:hover {
  background: linear-gradient(90deg, #002821 0%, #001a18 100%);
  box-shadow: 0 2px 16px #00ff9960;
}
.hks-term-hora {
  color: #00ff99cc;
  font-size: 0.90em;
  text-shadow: 0 0 6px #00ff99bb;
  font-weight: bold;
  min-width: 66px;
  letter-spacing: 0.03em;
  user-select: none;
  flex-shrink: 0;
}
.hks-term-msg {
  font-family: inherit;
  line-height: 1.42;
  color: inherit;
  text-shadow: 0 0 3px #00ff9922;
  min-width: 0;
  flex: 1 1 auto;
}
.hks-terminal-line.info {
  color: #00eaff;
  border-left-color: #00eaff;
  text-shadow: 0 0 7px #00eaff55;
}
.hks-terminal-line.sucesso {
  color: #55ff55;
  border-left-color: #55ff55;
  text-shadow: 0 0 7px #55ff5555;
}
.hks-terminal-line.erro {
  color: #ff5555;
  border-left-color: #ff5555;
  text-shadow: 0 0 7px #ff555555;
}
.hks-terminal-line.notif {
  color: #ffaa00;
  border-left-color: #ffaa00;
  text-shadow: 0 0 7px #ffaa0055;
}
.hks-notif-term {
  background: linear-gradient(90deg,#012019 80%,#000a 100%);
  border-radius: 7px;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 3px;
  padding: 9px 8px 7px 14px;
  box-shadow: 0 0 18px #00ff9955;
  animation: hksFadeNotif 4s forwards, hksFadeInTerm 0.4s;
  display: block;
  font-size: 1.03em;
  word-break: break-word;
}
.hks-notif-term.info    { color: #00eaff; text-shadow: 0 0 4px #00fff9cc;}
.hks-notif-term.sucesso { color: #55ff55; text-shadow: 0 0 4px #55ff55cc;}
.hks-notif-term.erro    { color: #ff5555; text-shadow: 0 0 4px #ff5555cc;}
.hks-notif-term.notif   { color: #ffaa00; text-shadow: 0 0 4px #ffaa00cc;}

@keyframes hksFadeInTerm {
  from { opacity: 0; transform: translateY(10px) scale(0.97);}
  to   { opacity: 1; transform: translateY(0) scale(1);}
}
@keyframes hksFadeNotif {
  0%   { opacity:1; }
  80%  { opacity:1; }
  100% { opacity:0; display:none; }
}

/* ===== RODAPÉ ===== */
.rodape {
  position: fixed;
  bottom: 0; left: 0; width: 100%;
  background: #000;
  color: #00ff99;
  text-align: center;
  font-size: 0.95rem;
  padding: 11px 0 10px 0;
  border-top: 2px solid #00ff99;
  box-shadow: 0 0 10px #00ff9944;
  z-index: 5;
  letter-spacing: 0.01em;
}
.rodape strong {
  color: #33ff99;
  text-shadow: 0 0 6px #00ff99;
}

/* ===== BOTÃO COPIAR ===== */
.copy-btn {
  background: #002a2a;
  border: 1px solid #00ff99;
  color: #00ff99;
  border-radius: 5px;
  font-size: 0.95rem;
  padding: 3px 8px;
  cursor: pointer;
  margin-left: 5px;
  transition: background .14s, color .14s;
}
.copy-btn:hover { background: #003838; color: #fff; }

/* ====== UTILIDADES ====== */
::-webkit-scrollbar { width: 7px; background: #000; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#00ff99 40%,#002a1a 100%); border-radius: 8px; box-shadow: 0 0 8px #00ff9977 inset; }
::selection { background: #00ff99; color: #000; }

/* ======= TEMA BRANCO HACKER (ajustes finais: terminal igual modal, analista azul, títulos das ferramentas NÃO mexidos) ======= */
body.hacker-theme-white,
body.theme-light {
  background: #f5f7fa !important;
  color: #223044 !important;
}

/* TOP BAR */
body.hacker-theme-white .top-bar,
body.theme-light .top-bar {
  background: linear-gradient(120deg, #e5ecf1 0%, #d1dde8 60%, #e5f7f2 100%) !important;
  border-bottom: 2px solid #4fc3f7;
  box-shadow: 0 0 14px #2196f320, 0 2px 10px #4fc3f730;
}
body.hacker-theme-white .logo,
body.theme-light .logo {
  color: #223044;
  text-shadow: 0 2px 5px #a5b8c966, 0 1px 0 #fff;
}

/* ANALISTA AZUL */
body.hacker-theme-white .analista,
body.theme-light .analista {
  color: #1976d2 !important;
  font-weight: bold;
  text-shadow: 0 1px 2px #fff, 0 1px 7px #aecbeb22;
  font-size: 1.05rem;
  margin-top: 4px;
}

/* MENU LATERAL */
body.hacker-theme-white .side-menu,
body.theme-light .side-menu {
  background: #eaf1f7 !important;
  border-right: 2px solid #4fc3f7;
  box-shadow: 8px 0 22px #4fc3f70f;
}
body.hacker-theme-white .side-header,
body.theme-light .side-header {
  background: #dbe7f1 !important;
  color: #18305a !important;
  border-bottom: 1.5px solid #4fc3f7;
  text-shadow: 0 2px 8px #b0c4d466;
}
body.hacker-theme-white .side-menu button:not(.close-side),
body.theme-light .side-menu button:not(.close-side) {
  background: #f5f7fa !important;
  color: #20507a !important;
  border: 1.5px solid #4fc3f7 !important;
  box-shadow: 0 0 9px #4fc3f719;
  text-shadow: 0 1px 2px #fff, 0 2px 12px #b0c4d466;
}
body.hacker-theme-white .side-menu button:not(.close-side):hover,
body.theme-light .side-menu button:not(.close-side):hover {
  background: #eaf6fd !important;
  color: #1565c0 !important;
  box-shadow: 0 0 11px #1565c066;
}

/* Busca Menu */
body.hacker-theme-white #search-tools,
body.theme-light #search-tools {
  background: #f5f7fa !important;
  color: #20507a !important;
  border: 1px solid #4fc3f7 !important;
  box-shadow: 0 1px 7px #aecbeb11 inset;
}

/* Categorias */
body.hacker-theme-white .categoria-title,
body.theme-light .categoria-title {
  color: #0b2540 !important;
  font-weight: bold;
  text-shadow: 0 2px 7px #4fc3f733, 0 1px 0 #fff;
  letter-spacing: 0.01em;
}
body.hacker-theme-white .categoria-lista,
body.theme-light .categoria-lista {
  color: #223044 !important;
  text-shadow: 0 1px 2px #fff4, 0 2px 12px #b0c4d422;
}
body.hacker-theme-white .categorias-toggle-grid label,
body.theme-light .categorias-toggle-grid label {
  background: #eef5fa;
  color: #223044;
  border-radius: 4px;
  box-shadow: 0 0 6px #4fc3f711 inset;
  font-weight: bold;
  text-shadow: 0 1px 2px #fff4, 0 1px 4px #b0c4d422;
}

/* MODAL CONFIGURAÇÕES */
body.hacker-theme-white .modal-content,
body.theme-light .modal-content,
body.theme-light .modal-config-compact {
  background: linear-gradient(145deg,#e6f1f7,#c7e2e6 85%) !important;
  border: 2px solid #4fc3f7 !important;
  color: #253340 !important;
  box-shadow: 0 0 26px #4fc3f733, 0 0 60px #2196f324;
  text-shadow: 0 1px 3px #fff, 0 1px 9px #b0c4d422;
}
body.hacker-theme-white .config-green,
body.theme-light .config-green { color: #186978 !important; font-weight: bold; text-shadow: 0 1px 2px #fff, 0 1px 7px #aecbeb22;}
body.hacker-theme-white .config-blue,
body.theme-light .config-blue  { color: #1976d2 !important; font-weight: bold; text-shadow: 0 1px 2px #fff;}
body.hacker-theme-white .config-orange,
body.theme-light .config-orange { color: #ff9800 !important; font-weight: bold; text-shadow: 0 1px 2px #fff;}
body.hacker-theme-white .modal-title,
body.theme-light .modal-title { color: #1976d2 !important; text-shadow: 0 2px 7px #4fc3f733, 0 1px 0 #fff;}
body.hacker-theme-white .modal-info,
body.theme-light .modal-info {
  color: #1976d2 !important;
  border-top: 1px solid #4fc3f7;
  text-shadow: 0 1px 2px #fff;
}

/* Botões gerais */
body.hacker-theme-white .btn, 
body.hacker-theme-white .btn-menu-hacker,
body.hacker-theme-white .btn-config,
body.theme-light .btn, 
body.theme-light .btn-menu-hacker,
body.theme-light .btn-config {
  background: #e6eef5 !important;
  color: #1565c0 !important;
  border-color: #4fc3f7 !important;
  box-shadow: 0 0 8px #4fc3f711;
  text-shadow: 0 1px 2px #fff;
}
body.hacker-theme-white .btn:hover,
body.theme-light .btn:hover,
body.hacker-theme-white .btn-menu-hacker:hover,
body.theme-light .btn-menu-hacker:hover,
body.hacker-theme-white .btn-config:hover,
body.theme-light .btn-config:hover {
  background: #e0f0fc !important;
  color: #1976d2 !important;
  box-shadow: 0 0 11px #1565c055;
}

/* Botões de configuração */
body.hacker-theme-white .modal-btn,
body.theme-light .modal-btn {
  border-radius: 7px;
  font-weight: bold;
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.07em;
  border: 1.5px solid #4fc3f7;
  box-shadow: 0 0 7px #4fc3f711;
  color: #186978;
  background: #e6eef5;
  transition: background .18s, color .18s, border .18s;
  text-align: center;
  text-shadow: 0 1px 2px #fff;
}
body.hacker-theme-white .modal-btn:hover,
body.theme-light .modal-btn:hover,
body.theme-light .modal-btn:focus,
body.hacker-theme-white .modal-btn:focus {
  background: #e0f0fc !important;
  color: #1976d2 !important;
  border-color: #2196f3 !important;
  text-shadow: 0 2px 7px #4fc3f733, 0 1px 0 #fff;
}

/* Botão sair */
body.hacker-theme-white .sair-btn,
body.theme-light .sair-btn,
body.theme-light .modal-btn.sair-btn {
  background: #fbeaea !important;
  color: #b71c1c !important;
  border-color: #b71c1c !important;
  text-shadow: 0 1px 2px #fff;
}

/* Campos inputs */
body.hacker-theme-white .modal-content input,
body.theme-light .modal-content input,
body.theme-light .modal-content select {
  background: #f5f7fa !important;
  color: #223044 !important;
  border: 1px solid #4fc3f7 !important;
  box-shadow: 0 1px 7px #aecbeb11 inset;
  text-shadow: 0 1px 2px #fff;
}
body.hacker-theme-white .modal-content input[type="checkbox"],
body.theme-light .modal-content input[type="checkbox"] {
  accent-color: #2196f3;
}

/* Cards Ferramentas */
body.hacker-theme-white .card,
body.theme-light .card {
  background: linear-gradient(145deg, #e6f1f7, #d0f5e7 90%);
  border-color: #4fc3f7;
  color: #223044;
  text-shadow: 0 1px 2px #fff4;
}

/* TERMINAL (ajustado: igual ao modal! cor, sombra, borda, fonte) */
body.hacker-theme-white .terminal,
body.theme-light .terminal {
  background: linear-gradient(145deg,#e6f1f7,#c7e2e6 85%) !important;
  color: #253340 !important;
  border: 2px solid #4fc3f7 !important;
  box-shadow: 0 0 26px #4fc3f733, 0 0 60px #2196f324;
  font-family: 'Share Tech Mono', monospace !important;
  text-shadow: 0 1px 3px #fff, 0 1px 9px #b0c4d422;
  transition: background .17s, color .17s;
}
body.hacker-theme-white .hks-terminal-line,
body.theme-light .hks-terminal-line {
  background: linear-gradient(90deg,#e4f1fa 0%,#e0f7ef 100%);
  color: #20507a;
  border-left-color: #4fc3f7;
  text-shadow: 0 1px 2px #fff, 0 1px 7px #4fc3f733;
}
body.hacker-theme-white .hks-terminal-line.info,
body.theme-light .hks-terminal-line.info { color: #1976d2; border-left-color: #2196f3; }
body.hacker-theme-white .hks-terminal-line.sucesso,
body.theme-light .hks-terminal-line.sucesso { color: #388e3c; border-left-color: #388e3c; }
body.hacker-theme-white .hks-terminal-line.erro,
body.theme-light .hks-terminal-line.erro { color: #b71c1c; border-left-color: #b71c1c; }
body.hacker-theme-white .hks-terminal-line.notif,
body.theme-light .hks-terminal-line.notif { color: #ff9800; border-left-color: #ff9800; }

/* Rodapé */
body.hacker-theme-white .rodape,
body.theme-light .rodape {
  background: #e6eef5;
  color: #1976d2;
  border-top: 2px solid #4fc3f7;
  box-shadow: 0 0 13px #4fc3f724;
  text-shadow: 0 1px 2px #fff;
}
body.hacker-theme-white .rodape strong,
body.theme-light .rodape strong {
  color: #1976d2;
  text-shadow: 0 1px 2px #4fc3f7;
}

/* Output */
body.hacker-theme-white .output,
body.theme-light .output {
  background: #e7f3ee;
  color: #223044;
  text-shadow: 0 1px 2px #fff4;
}

/* Seleção de texto */
body.hacker-theme-white ::selection,
body.theme-light ::selection {
  background: #e0f0fc;
  color: #20507a;
}

/* Modal close */
body.hacker-theme-white .close-side,
body.theme-light .close-side,
body.hacker-theme-white .close-modal,
body.theme-light .close-modal {
  color: #1976d2 !important;
  background: #dbe7f1 !important;
  box-shadow: 0 0 8px #4fc3f733;
  text-shadow: 0 1px 2px #fff;
}
body.hacker-theme-white .close-side:hover,
body.theme-light .close-side:hover,
body.hacker-theme-white .close-modal:hover,
body.theme-light .close-modal:hover {
  background: #1976d2 !important;
  color: #fff !important;
}
body.hacker-theme-white .hks-term-hora,
body.theme-light .hks-term-hora {
  color: #1976d2 !important;
  text-shadow: 0 1px 2px #fff, 0 1px 7px #aecbeb22;
  font-weight: bold;
}