/* ── DEV CONSOLE ── */
#dev-console {
  display: none;
  position: fixed;
  bottom: 80px; left: 20px;
  width: 520px;
  max-height: 340px;
  z-index: 500;
  background: rgba(2,6,10,0.97);
  border: 1px solid #00d4ff;
  box-shadow: 0 0 24px rgba(0,212,255,0.3);
  flex-direction: column;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
}
#dev-console.open { display: flex; }
#dev-console-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px;
  background: rgba(0,212,255,0.12);
  border-bottom: 1px solid #00d4ff44;
  color: #00d4ff;
  font-size: 11px;
  letter-spacing: 3px;
}
#dev-console-hint { font-size: 9px; opacity: 0.5; }
#dev-output {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  max-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dev-line { line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
.dev-line.out  { color: #b8d8e8; }
.dev-line.ok   { color: #00ff88; }
.dev-line.err  { color: #ff3355; }
.dev-line.info { color: #00d4ff; }
.dev-line.warn { color: #ffd700; }
#dev-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid #00d4ff22;
}
#dev-prompt { color: #00d4ff; opacity: 0.7; white-space: nowrap; }
#dev-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #fff; font-family: 'Share Tech Mono', monospace; font-size: 12px;
  caret-color: #00d4ff;
}

/* ── PERFORMANCE OVERLAY ── */
#perf-overlay {
  display: none;
  position: fixed;
  top: 74px;
  left: 16px;
  z-index: 80;
  min-width: 140px;
  pointer-events: none;
  user-select: none;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #b8d8e8;
  background: rgba(2, 6, 10, 0.92);
  border: 1px solid #00d4ff66;
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.25);
  padding: 7px 9px;
}

#perf-overlay .perf-title {
  color: #00d4ff;
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

#perf-overlay .perf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  line-height: 1.35;
}

#perf-overlay .perf-row span:first-child {
  color: #6ea0b8;
}

#perf-overlay .perf-row span:last-child {
  color: #d8ecff;
}

@media (max-width: 900px) {
  #perf-overlay {
    top: 68px;
    left: 8px;
    font-size: 10px;
    min-width: 124px;
    padding: 6px 8px;
  }
}