@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;1,14..32,400&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --bg:        #060b18;
  --bg-1:      #0b1220;
  --bg-2:      #0f172a;
  --surface:   rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --surface-3: rgba(255, 255, 255, 0.11);

  /* Accent palette */
  --blue:        #3b82f6;
  --blue-light:  #60a5fa;
  --blue-dark:   #2563eb;
  --blue-glow:   rgba(59, 130, 246, 0.30);
  --cyan:        #06b6d4;
  --cyan-glow:   rgba(6, 182, 212, 0.25);
  --purple:      #8b5cf6;
  --purple-glow: rgba(139, 92, 246, 0.25);
  --green:       #10b981;
  --green-light: #34d399;
  --green-glow:  rgba(16, 185, 129, 0.30);
  --amber:       #f59e0b;
  --amber-light: #fbbf24;
  --amber-glow:  rgba(245, 158, 11, 0.25);
  --red:         #ef4444;

  /* Typography */
  --t1: #f1f5f9;
  --t2: #94a3b8;
  --t3: #475569;
  --t4: #2d3f58;

  /* Borders */
  --b1: rgba(255, 255, 255, 0.06);
  --b2: rgba(255, 255, 255, 0.10);
  --b3: rgba(59, 130, 246, 0.35);
  --b4: rgba(59, 130, 246, 0.60);

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Shadows */
  --s1: 0 1px 3px rgba(0, 0, 0, 0.3);
  --s2: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
  --s3: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  --s4: 0 20px 60px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
  --glow-blue:   0 0 0 1px var(--blue-glow), 0 0 24px var(--blue-glow);
  --glow-green:  0 0 0 1px var(--green-glow), 0 0 16px var(--green-glow);
  --glow-amber:  0 0 0 1px var(--amber-glow), 0 0 16px var(--amber-glow);

  /* Easing */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --t:        0.18s;
  --t-slow:   0.32s;

  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--t1);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLASS CARD
   Gradient border via padding-box / border-box split background.
═══════════════════════════════════════════════════════════════════════════ */
.card {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.025) 100%) padding-box,
    linear-gradient(160deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 60%, rgba(59,130,246,0.20) 100%) border-box;
  border: 1px solid transparent;
  border-radius: var(--r);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    var(--s2);
  transition:
    box-shadow var(--t) var(--ease),
    transform var(--t) var(--ease);
}
.card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    var(--s3),
    0 0 0 1px rgba(59,130,246,0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INPUTS
═══════════════════════════════════════════════════════════════════════════ */
input[type=text],
input[type=password],
input[type=email],
input[type=search],
input:not([type]) {
  width: 100%;
  padding: .75rem 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--b2);
  border-radius: var(--r-sm);
  color: var(--t1);
  font-family: var(--font);
  font-size: .9rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--t) var(--ease),
    background   var(--t) var(--ease),
    box-shadow   var(--t) var(--ease);
}
input:focus {
  border-color: var(--blue);
  background: rgba(59, 130, 246, 0.06);
  box-shadow: 0 0 0 3px var(--blue-glow);
}
input::placeholder { color: var(--t3); }

label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .45rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════════════════ */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .65rem 1.25rem;
  border: 1px solid var(--b2);
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--t2);
  transition: all var(--t) var(--ease);
  outline: none;
}
button:hover {
  background: var(--surface-3);
  color: var(--t1);
  border-color: var(--b3);
}
button:active { transform: scale(0.98); }

.btn-primary {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 12px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--blue-light) 0%, var(--blue) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 20px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0) scale(0.99); }

.btn-danger {
  background: rgba(239,68,68,0.10);
  color: var(--red);
  border-color: rgba(239,68,68,0.20);
}
.btn-danger:hover {
  background: rgba(239,68,68,0.18);
  color: #fca5a5;
  border-color: rgba(239,68,68,0.40);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISC
═══════════════════════════════════════════════════════════════════════════ */
a { color: var(--blue-light); text-decoration: none; transition: opacity var(--t); }
a:hover { opacity: .75; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--t3); }

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--blue-glow); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(32px,-22px) scale(1.06); }
  66%     { transform: translate(-20px, 28px) scale(0.94); }
}

.fade-in   { animation: fadeUp .4s var(--ease) both; }
.fade-in-2 { animation: fadeUp .4s .08s var(--ease) both; }
.fade-in-3 { animation: fadeUp .4s .16s var(--ease) both; }
.fade-in-4 { animation: fadeUp .4s .24s var(--ease) both; }
.fade-in-5 { animation: fadeUp .4s .32s var(--ease) both; }

/* ═══════════════════════════════════════════════════════════════════════════
   GRADIENT TEXT UTILITY
═══════════════════════════════════════════════════════════════════════════ */
.grad-blue   { background: linear-gradient(135deg, var(--blue-light), var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.grad-green  { background: linear-gradient(135deg, var(--green), var(--green-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.grad-amber  { background: linear-gradient(135deg, var(--amber), var(--amber-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.grad-purple { background: linear-gradient(135deg, var(--purple), #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }