html, body { background-color: #0a0a0b; color: #ffffff; }
html { font-family: 'Montserrat', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

input, textarea, select {
  background-color: #0d0d0f !important;
  color: #ffffff;
  border-color: #2a2a30 !important;
}
input::placeholder, textarea::placeholder { color: #8b8b93; }
input:focus, textarea:focus, select:focus {
  border-color: #6b3bf4 !important;
  box-shadow: 0 0 0 3px rgba(107, 59, 244, 0.25) !important;
  outline: none;
}

.lnk {
  display: inline-flex; align-items: center; gap: .25rem;
  border-radius: .5rem; border: 1px solid #2a2a30;
  padding: .25rem .625rem; font-size: 11px; color: #8b8b93;
  transition: color .15s, border-color .15s;
}
.lnk:hover { color: #ffffff; border-color: #42424a; }

.pg {
  border-radius: .5rem; border: 1px solid #2a2a30;
  padding: .25rem .625rem; font-size: 12px; color: #8b8b93;
  transition: color .15s, border-color .15s;
}
.pg:hover:not(:disabled) { color: #ffffff; border-color: #42424a; }
.pg:disabled { opacity: .3; cursor: not-allowed; }

@keyframes pulse-soft { 0%, 100% { opacity: .9 } 50% { opacity: .3 } }
.pulse-dot { animation: pulse-soft 1.6s ease-in-out infinite; }

@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fade-up .28s ease-out both; }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
.fade-in { animation: fade-in .18s ease-out both; }

.mesh-bg {
  background:
    radial-gradient(60% 60% at 12% -20%, rgba(107,59,244,.22), transparent 62%),
    radial-gradient(46% 46% at 96% 0%, rgba(152,89,255,.14), transparent 62%);
}

.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d0d0f; }
::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 6px; border: 2px solid #0d0d0f; }
::-webkit-scrollbar-thumb:hover { background: #42424a; }

/* Light theme: the tool is dark-first, this keeps it legible if someone flips it. */
html[data-theme="light"], html[data-theme="light"] body { background-color: #f6f6f8; color: #131316; }
html[data-theme="light"] .bg-surface-100 { background-color: #f6f6f8 !important; }
html[data-theme="light"] .bg-surface-200 { background-color: #ffffff !important; }
html[data-theme="light"] .bg-surface-50 { background-color: #ffffff !important; }
html[data-theme="light"] .text-surface-900 { color: #131316 !important; }
html[data-theme="light"] .text-surface-800 { color: #3a3a42 !important; }
html[data-theme="light"] .text-surface-700 { color: #6b6b75 !important; }
html[data-theme="light"] .border-surface-500\/40,
html[data-theme="light"] .border-surface-500\/50,
html[data-theme="light"] .border-surface-500 { border-color: #dcdce2 !important; }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea {
  background-color: #ffffff !important; color: #131316; border-color: #dcdce2 !important;
}