:root {
  --ig-bg: #0b0b12;
  --ig-surface: #15151f;
  --ig-surface-2: #1d1d2b;
  --ig-border: rgba(255, 255, 255, 0.08);
  --ig-text: #f5f5f7;
  --ig-text-muted: #a1a1ad;
  --ig-gradient: linear-gradient(135deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d, #f56040, #f77737, #fcaf45, #ffdc80);
  --ig-verified: #3897f0;
  --ig-radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ig-bg);
  color: var(--ig-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.gradient-text {
  background: var(--ig-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card {
  background: var(--ig-surface);
  border: 1px solid var(--ig-border);
  border-radius: var(--ig-radius);
  padding: 20px;
}

.input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--ig-radius);
  border: 1px solid var(--ig-border);
  background: var(--ig-surface-2);
  color: var(--ig-text);
  font-size: 16px;
}

.input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #c13584;
}

.btn {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: var(--ig-radius);
  background: var(--ig-gradient);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error-text {
  color: #ff6b6b;
  font-size: 14px;
  margin-top: 8px;
  min-height: 20px;
}

.skeleton {
  border-radius: var(--ig-radius);
  background: linear-gradient(90deg, var(--ig-surface) 25%, var(--ig-surface-2) 37%, var(--ig-surface) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.fade-in {
  animation: fade-in 0.4s ease both;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}