@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #0a0e17;
  --panel: #10151f;
  --panel-border: #1e2635;
  --accent: #22d3ee;
  --accent-dim: #0e7490;
  --violet: #818cf8;
  --ok: #34d399;
  --err: #fb7185;
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(34, 211, 238, 0.07), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(129, 140, 248, 0.08), transparent 45%);
  font-family: 'Inter', system-ui, sans-serif;
}

.font-display { font-family: 'Space Grotesk', system-ui, sans-serif; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* progress rail */
.step-rail {
  background: linear-gradient(90deg, var(--accent) var(--pct, 0%), #1e2635 var(--pct, 0%));
  transition: --pct 0.4s ease;
}

/* connection pulse (signature element for the IP-connect step) */
.pulse-dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--err);
  transition: background 0.3s ease;
}
.pulse-dot.connected {
  background: var(--ok);
}
.pulse-dot.connected::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--ok);
  animation: pulse-ring 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}

.card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
}

.input-field {
  background: #0d1320;
  border: 1px solid #263042;
  color: #e2e8f0;

  transition:
    border-color .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1),
    background-color .35s ease,
    transform .25s ease;
}
.input-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

.btn-primary {
  background: var(--accent);
  color: #04202a;
  font-weight: 600;
}
.btn-primary:hover { background: #67e3f5; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  border: 1px solid #263042;
  color: #cbd5e1;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.account-card {
  border: 1px solid #263042;
  background: #0d1320;
}

::selection { background: rgba(34,211,238,0.3); }

.fade-in { animation: fadeIn 0.35s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Smooth auto-fill animation (typewriter effect for pool-sourced account cards) */
.input-field.is-typing {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px rgba(34,211,238,.12),
    0 0 18px rgba(34,211,238,.18);

  transform: scale(1.01);
}

.input-field.just-filled {
  animation: smoothFill .7s cubic-bezier(.22,.61,.36,1);
}

@keyframes smoothFill {

  0%{
    background: rgba(34,211,238,.18);
    transform: scale(1.01);
  }

  40%{
    background: rgba(34,211,238,.10);
  }

  100%{
    background:#0d1320;
    transform: scale(1);
  }

}
@keyframes justFilled {
  0% { background: rgba(34, 211, 238, 0.16); }
  100% { background: #0d1320; }
}
html[data-theme="light"] .input-field.just-filled { animation-name: justFilledLight; }
@keyframes justFilledLight {
  0% { background: rgba(34, 211, 238, 0.22); }
  100% { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in, .pulse-dot.connected::after { animation: none; }
  .input-field.is-typing, .input-field.just-filled { animation: none; box-shadow: none; }
}
html[data-theme="light"] .input-field.just-filled{
    animation-name:smoothFillLight;
}

@keyframes smoothFillLight{

    0%{
        background:rgba(34,211,238,.18);
        transform:scale(1.01);
    }

    40%{
        background:rgba(34,211,238,.10);
    }

    100%{
        background:#fff;
        transform:scale(1);
    }

}

.input-field.is-typing {
    caret-color: transparent;
    position: relative;
}

.input-field.is-typing::after{
    content:"";
    position:absolute;
    right:14px;
    top:50%;
    width:2px;
    height:18px;
    transform:translateY(-50%);
    background:var(--accent);
    animation:blink .8s infinite;
}

@keyframes blink{
    50%{
        opacity:0;
    }
}
/* ============ MOBILE RESPONSIVENESS ============ */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* ============ LOADING OVERLAY ============ */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 14, 0.55);
  backdrop-filter: blur(3px);
  animation: overlayFadeIn 0.2s ease;
}
.loading-overlay.hidden { display: none; }

.loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 220px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 3px solid rgba(34, 211, 238, 0.2);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

.loading-text {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  color: #ffffff;
  font-size: 0.95rem;
}

.loading-subtext {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #94a3b8;
  font-size: 0.75rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-spinner { animation-duration: 1.6s; }
}

html[data-theme="light"] .loading-overlay {
  background: rgba(244, 246, 251, 0.7);
}
html[data-theme="light"] .loading-text { color: #0f172a; }
html[data-theme="light"] .loading-subtext { color: #64748b; }

.theme-toggle-btn {
  background: transparent;
  border: 1px solid #263042;
  color: #cbd5e1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.theme-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============ LIGHT THEME ============ */
html[data-theme="light"] {
  --bg: #f4f6fb;
  --panel: #ffffff;
  --panel-border: #dfe4ee;
  --accent: #0891b2;
  --accent-dim: #0e7490;
  --violet: #6366f1;
  --ok: #059669;
  --err: #e11d48;
}

html[data-theme="light"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(8, 145, 178, 0.06), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(99, 102, 241, 0.06), transparent 45%);
  color: #1e293b;
}

html[data-theme="light"] .text-white { color: #0f172a !important; }
html[data-theme="light"] .text-slate-200 { color: #1e293b !important; }
html[data-theme="light"] .text-slate-400 { color: #475569 !important; }
html[data-theme="light"] .text-slate-500 { color: #64748b !important; }
html[data-theme="light"] .text-cyan-300 { color: #0e7490 !important; }
html[data-theme="light"] .text-cyan-400 { color: #0891b2 !important; }
html[data-theme="light"] .text-rose-400 { color: #e11d48 !important; }

html[data-theme="light"] .card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .input-field {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
}
html[data-theme="light"] .input-field::placeholder { color: #94a3b8; }
html[data-theme="light"] .input-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}

html[data-theme="light"] .btn-primary {
  background: var(--accent);
  color: #ffffff;
}
html[data-theme="light"] .btn-primary:hover { background: #067a91; }

html[data-theme="light"] .btn-ghost {
  border: 1px solid #cbd5e1;
  color: #334155;
}
html[data-theme="light"] .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

html[data-theme="light"] .theme-toggle-btn {
  border-color: #cbd5e1;
  color: #334155;
}
html[data-theme="light"] .theme-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

html[data-theme="light"] .account-card {
  border: 1px solid #dfe4ee;
  background: #f8fafc;
}

html[data-theme="light"] .bg-\[\#0d1320\] { background-color: #f1f5f9 !important; }
html[data-theme="light"] .border-\[\#263042\] { border-color: #dfe4ee !important; }
html[data-theme="light"] .border-\[\#1e2635\] { border-color: #e2e8f0 !important; }
html[data-theme="light"] .border-cyan-800 { border-color: #a5f3fc !important; }

html[data-theme="light"] ::selection { background: rgba(8, 145, 178, 0.2); }