/* GrexLabs Theme */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --ease-smooth:cubic-bezier(.22,.61,.36,1);
  --duration-fast:.18s;
  --brand:215 88% 43%;
  --brand-hex:#1e75e0;
  --radius:.625rem;
  --background:0 0% 100%;
  --foreground:240 10% 3.9%;
  --card:0 0% 100%;
  --card-foreground:240 10% 3.9%;
  --muted:240 4.8% 95.9%;
  --muted-foreground:240 3.8% 46.1%;
  --border:240 5.9% 90%;
  --destructive:0 84.2% 60.2%;
  --green:#059669;
  --green-light:#e0f5eb;
  --red:#dc2626;
  --red-light:#fef2f2;
  --purple:#7c3aed;
  --amber:#d97706;
  --pink:#ec4899;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
::selection{background:#111;color:#fff}
html{scroll-behavior:smooth}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:hsl(var(--foreground));
  background-color:#f2f2f2;
  position:relative;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='52' viewBox='0 0 180 52'%3E%3Cg fill='none' stroke='rgba(0,0,0,0.068)' stroke-width='0.9'%3E%3Cpath d='M0 6 C8 1 16 1 24 6 S40 11 48 6 S64 1 72 6 S88 11 96 6 S112 1 120 6 S136 11 144 6 S160 1 168 6 S176 11 184 6'/%3E%3Cpath d='M0 13 C8 8 16 8 24 13 S40 18 48 13 S64 8 72 13 S88 18 96 13 S112 8 120 13 S136 18 144 13 S160 8 168 13 S176 18 184 13'/%3E%3Cpath d='M0 20 C8 15 16 15 24 20 S40 25 48 20 S64 15 72 20 S88 25 96 20 S112 15 120 20 S136 25 144 20 S160 15 168 20 S176 25 184 20'/%3E%3Cpath d='M0 27 C8 22 16 22 24 27 S40 32 48 27 S64 22 72 27 S88 32 96 27 S112 22 120 27 S136 32 144 27 S160 22 168 27 S176 32 184 27'/%3E%3Cpath d='M0 34 C8 29 16 29 24 34 S40 39 48 34 S64 29 72 34 S88 39 96 34 S112 29 120 34 S136 39 144 34 S160 29 168 34 S176 39 184 34'/%3E%3Cpath d='M0 41 C8 36 16 36 24 41 S40 46 48 41 S64 36 72 41 S88 46 96 41 S112 36 120 41 S136 46 144 41 S160 36 168 41 S176 46 184 41'/%3E%3Cpath d='M0 48 C8 43 16 43 24 48 S40 53 48 48 S64 43 72 48 S88 53 96 48 S112 43 120 48 S136 53 144 48 S160 43 168 48 S176 53 184 48'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;background-size:115px 34px;
}
body::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 18% 20%,hsla(215,88%,43%,.12),transparent),
    radial-gradient(ellipse 60% 45% at 82% 24%,rgba(0,0,0,.07),transparent),
    radial-gradient(ellipse 80% 50% at 50% 92%,hsla(215,88%,43%,.08),transparent);
}

a,button,[role="button"]{
  transition:color var(--duration-fast) var(--ease-smooth),
    background-color var(--duration-fast) var(--ease-smooth),
    border-color var(--duration-fast) var(--ease-smooth),
    opacity var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth);
}
a{color:hsl(var(--brand));text-decoration:none}
a:hover{text-decoration:underline}

/* ═══ SHARED COMPONENTS ═══ */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 28px;border-radius:999px;font-size:14px;font-weight:600;
  background:hsl(var(--foreground));color:#fff;border:none;cursor:pointer;
  text-decoration:none;font-family:'Inter',sans-serif;
  box-shadow:0 14px 28px rgba(0,0,0,.18);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 20px 34px rgba(0,0,0,.22);text-decoration:none}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 28px;border-radius:999px;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.8);backdrop-filter:blur(8px);
  color:hsl(var(--foreground));border:1px solid rgba(0,0,0,.08);
  cursor:pointer;text-decoration:none;font-family:'Inter',sans-serif;
  box-shadow:0 12px 34px rgba(0,0,0,.05);
}
.btn-outline:hover{background:#fff;transform:translateY(-1px);box-shadow:0 18px 48px rgba(0,0,0,.1);text-decoration:none}

.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 28px;border-radius:999px;font-size:14px;font-weight:600;
  background:transparent;color:hsl(var(--muted-foreground));
  border:1px solid var(--border);cursor:pointer;text-decoration:none;
  font-family:'Inter',sans-serif;
}
.btn-ghost:hover{background:rgba(255,255,255,.8);border-color:rgba(0,0,0,.12);color:hsl(var(--foreground));text-decoration:none}

.card{
  background:linear-gradient(145deg,#ffffff,#f8f9fa);
  border:1px solid rgba(0,0,0,.06);
  border-radius:1.25rem;padding:22px;
  transition:all .35s var(--ease-smooth);
  position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;top:0;left:12px;right:12px;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.8),transparent);
  pointer-events:none;
}
.card:hover{border-color:rgba(0,0,0,.08);transform:translateY(-2px)}

.section-label{
  font-size:11px;font-weight:600;color:hsl(var(--brand));
  text-transform:uppercase;letter-spacing:3px;margin-bottom:12px;
  font-family:'JetBrains Mono',monospace;
}

.input-field{
  width:100%;padding:12px 14px;border:1px solid var(--border);
  border-radius:var(--radius);font-size:14px;font-family:'Inter',sans-serif;
  background:hsl(var(--muted));color:hsl(var(--foreground));
  transition:all var(--duration-fast) var(--ease-smooth);outline:none;
}
.input-field:focus{border-color:hsl(var(--brand));box-shadow:0 0 0 3px rgba(30,117,224,.1);background:#fff}
.input-field::placeholder{color:hsl(var(--muted-foreground))}

.label{
  display:block;font-size:11px;font-weight:600;color:hsl(var(--muted-foreground));
  text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;
  font-family:'JetBrains Mono',monospace;
}

.social-btn{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--border);
  background:hsl(var(--muted));display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth);
}
.social-btn:hover{border-color:#d1d5db;background:#fff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.social-btn svg{width:20px;height:20px}

.toast-container{
  position:fixed;top:20px;right:20px;z-index:10000;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}