/* ── Gerador de Ruído ───────────────────────────────────────── */

.ng-main { padding-bottom: var(--space-20); }

/* Hero */
.ng-hero { padding: var(--space-12) 0 var(--space-8); }
.ng-hero__inner {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-10);
  align-items: start;
}

.ng-title { margin-bottom: var(--space-2); }
.ng-subtitle {
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-8);
  max-width: 580px;
}

/* Cores dos tipos */
.ng-white  { color: #94a3b8; }
.ng-pink   { color: #ec4899; }
.ng-brown  { color: #a16207; }

/* Sliders */
.ng-sliders { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-8); }

.ng-channel {}
.ng-channel__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}
.ng-channel__name { font-weight: 600; font-size: 1rem; }
.ng-channel__val  { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ng-channel__desc { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-2); line-height: 1.5; }

.ng-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  outline: none;
  cursor: pointer;
}
.ng-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--violet-600);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.ng-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ng-slider--white::-webkit-slider-thumb { background: #64748b; }
.ng-slider--pink::-webkit-slider-thumb  { background: #ec4899; }
.ng-slider--brown::-webkit-slider-thumb { background: #92400e; }

/* Faixa preenchida */
.ng-slider--white { accent-color: #64748b; }
.ng-slider--pink  { accent-color: #ec4899; }
.ng-slider--brown { accent-color: #92400e; }

/* Controles */
.ng-controls {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-5);
}
.ng-btn-play {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--violet-600);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  box-shadow: 0 4px 14px rgba(139,92,246,.3);
}
.ng-btn-play [data-lucide] { width: 20px; height: 20px; }
.ng-btn-play:hover { background: var(--violet-500); transform: translateY(-1px); }

.ng-btn-share {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.ng-btn-share [data-lucide] { width: 16px; height: 16px; }
.ng-btn-share:hover { background: var(--violet-50); color: var(--violet-600); border-color: var(--violet-300); }

/* Timer */
.ng-timer-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
}
.ng-timer-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}
.ng-timer-label [data-lucide] { width: 15px; height: 15px; }
.ng-timer-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.ng-timer-btn:hover, .ng-timer-btn.active {
  background: var(--violet-600);
  color: #fff;
  border-color: var(--violet-600);
}
.ng-timer-display {
  margin-left: auto;
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--violet-600);
}

/* Coluna de presets */
.ng-col-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.ng-presets-save {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.ng-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}
.ng-btn-save {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--violet-600);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ng-btn-save [data-lucide] { width: 14px; height: 14px; }
.ng-btn-save:hover { background: var(--violet-500); }

#ng-presets-list { margin-bottom: var(--space-5); }
.ng-preset-btn {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.ng-preset-btn:hover { border-color: var(--violet-400); background: var(--violet-50); color: var(--violet-700); }
.ng-empty { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.ng-quick-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.ng-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ng-quick-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.ng-quick-btn:hover { border-color: var(--violet-400); background: var(--violet-50); }
.ng-quick-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }
.ng-quick-desc { font-size: 10px; color: var(--color-text-muted); }

/* Sobre */
.ng-about { padding: var(--space-12) 0; border-top: 1px solid var(--color-border); }
.ng-about__inner { max-width: 900px; }
.ng-about h2 { margin-bottom: var(--space-8); }
.ng-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.ng-compare-card {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}
.ng-compare-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  margin-bottom: var(--space-4);
}
.ng-compare-dot.ng-white  { background: #94a3b8; }
.ng-compare-dot.ng-pink   { background: #ec4899; }
.ng-compare-dot.ng-brown  { background: #92400e; }
.ng-compare-card h3 { font-size: 1rem; margin-bottom: var(--space-3); }
.ng-compare-card p { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.7; margin: 0; }

/* Responsive */
@media (max-width: 900px) {
  .ng-hero__inner { grid-template-columns: 1fr; }
  .ng-compare-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ng-quick-grid { grid-template-columns: 1fr; }
  .ng-controls { flex-wrap: wrap; }
}