:root{--bg:#0b1220;--card:#121a2b;--text:#eaf2ff;--muted:#9bb3d3;--accent:#4da3ff;--ok:#20c997;--warn:#ffcc00;--err:#ff6b6b}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;
  background:var(--bg);color:var(--text);
  /* PERFORMANCE: Melhorar scroll e rendering */
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}

header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#0b2e5b;color:#fff;border-bottom:1px solid rgba(255,255,255,.15);justify-content:space-between}
header .title{font-weight:600;letter-spacing:.2px;color:inherit}
header img{height:42px;filter:none;transition:transform 0.2s ease}
header img:hover{transform:scale(1.05)}

@media (max-width: 768px) {
  header img{height:36px}
  header{padding:.5rem .75rem}
}

@media (max-width: 480px) {
  header img{height:32px}
  header{gap:.5rem}
}

header .meta{display:flex;gap:10px;align-items:center}

button{background:var(--accent);color:#001;border:0;border-radius:8px;padding:6px 10px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center}
button[disabled]{opacity:.5;cursor:not-allowed}
button svg{transition:transform 0.3s ease}
button:not([disabled]):hover svg{transform:rotate(180deg)}
button:not([disabled]):active svg{transform:rotate(360deg)}

#btn-refresh{min-width:36px;height:36px;padding:8px}
#btn-mqtt-reset{min-width:36px;height:36px;padding:8px;background:#ff6b6b;display:flex}
#btn-mqtt-reset:hover{background:#ff5252}

#map{width:100%;height:calc(100% - 58px)}
#msg{position:absolute;top:72px;left:12px;z-index:10;background:rgba(255,255,255,.95);border:1px solid rgba(0,0,0,.08);padding:.5rem .75rem;border-radius:.5rem;box-shadow:0 2px 10px rgba(0,0,0,.08);max-width:min(92vw,420px);font-size:.92rem;display:none;color:#111}

.toast{position:fixed;bottom:16px;right:16px;background:#0f1830;border:1px solid #2a3b60;border-radius:10px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.35);color:var(--text);z-index:1000}
.toast.ok{border-color:#1d7b5f;background:#0f3830}
.toast.err{border-color:#7b1d1d;background:#3f1010}

.mqtt-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: default;
}

.mqtt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.mqtt-dot.online {background-color: #22c55e;}
.mqtt-dot.offline {background-color: #ef4444;}
.mqtt-dot.connecting {background-color: #f59e0b;animation: pulse 1.5s infinite;}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.mqtt-text {color: #9bb3d3;}
.mqtt-sync-time {color: #7a96b8;font-size: 0.7rem;font-family: 'Courier New', monospace;margin-left: 0.25rem;}

.gm-ui-hover-effect{display:none!important}

/* Modal de Confirmação */
.confirmation-modal {
  position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(11, 18, 32, 0.85);
  display: flex;align-items: center;justify-content: center;z-index: 10000;backdrop-filter: blur(8px);
  opacity: 0;visibility: hidden;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.confirmation-modal.show {opacity: 1;visibility: visible;}

.confirmation-dialog {
  background: var(--card);border: 1px solid rgba(77, 163, 255, 0.2);border-radius: 16px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(77, 163, 255, 0.1);
  max-width: 480px;width: 92%;transform: scale(0.85) translateY(40px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
}

.confirmation-modal.show .confirmation-dialog {transform: scale(1) translateY(0);}

.confirmation-header {
  background: linear-gradient(135deg, #0b2e5b 0%, #1565c0 50%, var(--accent) 100%);
  color: var(--text);padding: 1.75rem 2rem 1.5rem;text-align: center;position: relative;
  border-bottom: 1px solid rgba(77, 163, 255, 0.2);
}

.confirmation-title {font-size: 1.25rem;font-weight: 600;margin: 0;letter-spacing: 0.5px;
  color: var(--text);text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}

.confirmation-body {padding: 2rem;background: var(--card);color: var(--text);}

.confirmation-message {font-size: 1.1rem;color: var(--text);margin-bottom: 1rem;
  line-height: 1.6;text-align: center;font-weight: 500;}

.confirmation-actions {display: flex;gap: 1rem;margin-top: 2rem;}

.confirmation-btn {flex: 1;padding: 1rem 1.5rem;border: none;border-radius: 12px;font-size: 1rem;
  font-weight: 600;cursor: pointer;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;align-items: center;justify-content: center;gap: 0.75rem;font-family: inherit;
  letter-spacing: 0.3px;position: relative;overflow: hidden;}

.confirmation-btn-confirm {background: linear-gradient(135deg, var(--ok) 0%, #16a085 100%);
  color: #fff;box-shadow: 0 4px 16px rgba(32, 201, 151, 0.3);}

.confirmation-btn-confirm:hover {background: linear-gradient(135deg, #16a085 0%, var(--ok) 100%);
  transform: translateY(-2px);box-shadow: 0 8px 25px rgba(32, 201, 151, 0.4);}

.confirmation-btn-cancel {background: linear-gradient(135deg, var(--err) 0%, #e74c3c 100%);
  color: #fff;box-shadow: 0 4px 16px rgba(255, 107, 107, 0.3);}

.confirmation-btn-cancel:hover {background: linear-gradient(135deg, #e74c3c 0%, var(--err) 100%);
  transform: translateY(-2px);box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);}

@media (max-width: 520px) {
  .confirmation-dialog {width: 95%;margin: 1rem;border-radius: 12px;}
  .confirmation-header {padding: 1.5rem 1.5rem 1.25rem;}
  .confirmation-title {font-size: 1.1rem;}
  .confirmation-body {padding: 1.5rem;}
  .confirmation-message {font-size: 1rem;}
  .confirmation-actions {flex-direction: column;gap: 0.75rem;}
  .confirmation-btn {width: 100%;padding: 0.875rem 1.25rem;}
}