/* EasyDev — estilos globais */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { overscroll-behavior: none; }

.glass {
  background: rgba(17, 24, 39, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(31, 42, 60, 0.9);
}

.input-field {
  width: 100%;
  background: #0B0F17;
  border: 1px solid #1F2A3C;
  border-radius: 0.75rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.875rem;
  color: #F3F4F6;
  outline: none;
  transition: border-color 0.15s;
}
.input-field:focus { border-color: #22D3EE; }
.input-field::placeholder { color: #4B5563; }

.param-tab.active { color: #22D3EE; border-bottom-color: #22D3EE; }
.admin-tab.active { color: #A78BFA; border-bottom-color: #A78BFA; }

.chip {
  padding: 0.4rem 0.75rem;
  border-radius: 0.6rem;
  background: #0B0F17;
  border: 1px solid #1F2A3C;
  font-size: 0.72rem;
  font-weight: 600;
  color: #9CA3AF;
  transition: all 0.15s;
}
.chip:active { transform: scale(0.94); }
.chip-active {
  background: rgba(34, 211, 238, 0.12);
  border-color: rgba(34, 211, 238, 0.5);
  color: #22D3EE;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: #1F2A3C;
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22D3EE, #A78BFA);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(34, 211, 238, 0.4);
}
.slider::-moz-range-thumb {
  width: 22px; height: 22px; border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #22D3EE, #A78BFA);
  cursor: pointer;
}

.tgl {
  width: 44px; height: 24px;
  border-radius: 12px;
  background: #1F2A3C;
  position: relative;
  transition: background 0.2s;
}
.tgl-dot {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #6B7280;
  transition: all 0.2s;
}
.tgl-on { background: rgba(34, 211, 238, 0.25); }
.tgl-on .tgl-dot { left: 23px; background: #22D3EE; }

.view-btn.tool-active {
  background: rgba(34, 211, 238, 0.18);
  border-color: rgba(34, 211, 238, 0.6);
  color: #22D3EE;
}

.exp-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 0.5rem;
  border-radius: 0.9rem;
  background: #0B0F17;
  border: 1px solid #1F2A3C;
  font-size: 0.72rem;
  font-weight: 600;
  color: #D1D5DB;
  transition: all 0.15s;
}
.exp-btn:active { transform: scale(0.96); }
.exp-btn i { font-size: 1.1rem; }

.act-btn {
  width: 32px; height: 32px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  font-size: 0.8rem;
  transition: background 0.15s;
}
.act-btn:hover { background: #1F2A3C; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb { background: #1F2A3C; border-radius: 3px; }

@media (min-width: 768px) {
  #param-panel { height: 300px !important; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.feature-card, .module-card, .project-card { animation: fadeUp 0.4s ease both; }