/* Gold Analyzer custom styles */

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(245, 158, 11, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(234, 179, 8, 0.06) 0%, transparent 40%);
}

.mode-btn {
  @apply bg-slate-900/60 border border-slate-800 rounded-2xl p-5 text-left transition hover:border-amber-500/40 hover:bg-slate-900;
}
.mode-btn.active {
  @apply border-amber-500 bg-gradient-to-br from-amber-500/10 to-yellow-600/5 shadow-lg shadow-amber-500/10;
}

.tf-btn {
  @apply px-3 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 transition;
}
.tf-btn.active {
  @apply bg-amber-500 text-slate-900 font-semibold;
}

/* Loading spinner */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(245, 158, 11, 0.25);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Result cards */
.result-card {
  @apply bg-slate-800/40 border border-slate-700/50 rounded-xl p-4;
}
.badge {
  @apply inline-block px-2 py-0.5 rounded text-xs font-semibold;
}
.badge-buy { @apply bg-emerald-500/20 text-emerald-400 border border-emerald-500/30; }
.badge-sell { @apply bg-red-500/20 text-red-400 border border-red-500/30; }
.badge-wait { @apply bg-slate-500/20 text-slate-400 border border-slate-500/30; }
.badge-warn { @apply bg-amber-500/20 text-amber-400 border border-amber-500/30; }

.kv-row {
  @apply flex justify-between py-1.5 border-b border-slate-700/50 text-sm;
}
.kv-row:last-child { @apply border-0; }
.kv-key { @apply text-slate-400; }
.kv-val { @apply font-mono text-slate-200; }

/* ===== Settings Modal ===== */
.settings-tab {
  @apply px-4 py-2 text-sm text-slate-400 border-b-2 border-transparent hover:text-slate-100 transition;
}
.settings-tab.active {
  @apply text-amber-400 border-amber-500;
}

.cfg-input {
  @apply w-full bg-slate-800/60 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-100
         focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500/40 transition;
}
.cfg-input::placeholder { @apply text-slate-500; }
textarea.cfg-input { @apply resize-y; }

.btn-secondary {
  @apply px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 hover:border-amber-500/40
         text-slate-200 text-sm font-medium transition;
}

.provider-radio { @apply cursor-pointer; }
.provider-card {
  @apply bg-slate-800/40 border border-slate-700 rounded-xl p-4 text-center transition
         hover:border-amber-500/40 hover:bg-slate-800;
}
.provider-radio input:checked + .provider-card {
  @apply border-amber-500 bg-amber-500/10 shadow-lg shadow-amber-500/10;
}

.test-result {
  @apply p-3 rounded-lg text-sm border;
}
.test-result.ok { @apply bg-emerald-500/10 border-emerald-500/40 text-emerald-300; }
.test-result.err { @apply bg-red-500/10 border-red-500/40 text-red-300; }

/* Pulse animation untuk price update */
.pulse-up { animation: pulseUp 0.6s; }
.pulse-down { animation: pulseDown 0.6s; }
@keyframes pulseUp {
  0%,100% { color: #f1f5f9; }
  50% { color: #34d399; text-shadow: 0 0 12px rgba(52, 211, 153, 0.6); }
}
@keyframes pulseDown {
  0%,100% { color: #f1f5f9; }
  50% { color: #f87171; text-shadow: 0 0 12px rgba(248, 113, 113, 0.6); }
}