:root {
  --bg: #0a0e17;
  --card: #141a29;
  --emerald: #10d97e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(16,217,126,0.10), transparent 60%),
    radial-gradient(1000px 500px at 0% 20%, rgba(34,211,238,0.08), transparent 55%),
    var(--bg);
  color: #e2e8f0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-mono, .sf-ticker span, table { font-family: 'JetBrains Mono', monospace; }

/* Cards */
.sf-card {
  background: linear-gradient(180deg, rgba(20,26,41,0.9), rgba(13,19,32,0.9));
  border: 1px solid rgba(148,163,184,0.10);
  border-radius: 1rem;
  box-shadow: 0 10px 40px -20px rgba(0,0,0,0.8);
  backdrop-filter: blur(6px);
}

/* Buttons */
.sf-btn-primary {
  background: linear-gradient(135deg, #22d3ee, #10d97e);
  color: #051012;
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  border-radius: 0.7rem;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 8px 24px -8px rgba(16,217,126,0.6);
}
.sf-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(16,217,126,0.75); }
.sf-btn-primary:disabled { opacity: .6; cursor: wait; transform: none; }

.sf-btn-ghost {
  background: rgba(148,163,184,0.06);
  color: #e2e8f0;
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(148,163,184,0.2);
  cursor: pointer;
  transition: all .15s ease;
}
.sf-btn-ghost:hover { border-color: rgba(16,217,126,0.5); color: #fff; transform: translateY(-2px); }

/* Inputs */
.sf-input {
  width: 100%;
  background: #0d1320;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 0.6rem;
  padding: 0.7rem 0.9rem;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
  transition: border-color .15s ease;
}
.sf-input:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(16,217,126,0.15); }
.sf-input::placeholder { color: #475569; }

.sf-gradient-text {
  background: linear-gradient(120deg, #22d3ee, #10d97e, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Ticker */
.sf-ticker-wrap { background: rgba(13,19,32,0.6); }
.sf-ticker {
  display: inline-flex;
  white-space: nowrap;
  animation: ticker 32s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal .8s ease forwards;
}
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

/* Toast */
.animate-toast { animation: toastin .3s ease; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }

table th, table td { white-space: nowrap; }
</parameter>
</invoke>