/* =========================
   AUTH PAGES (LOGIN / SIGNUP)
   ========================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Inter, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(
      circle at top,
      #ffffff 0%,
      #f4ecff 40%,
      #e9dcff 100%
  );
  min-height: 100vh;
  overflow: hidden;
}

/* Background layers */
.auth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.auth-bg img {
  position: absolute;
  width: 100%;
  bottom: 0;
  pointer-events: none;
}

/* Floating platform icons */
.float-icon {
  position: absolute;
  width: 48px;
  pointer-events: none;
  transition: transform 0.15s ease-out;
}

/* Floating platform icon positions (around card) */
.float-tiktok {
  top: 42%;
  left: calc(50% - 300px);
}

.float-youtube {
  top: 38%;
  right: calc(50% - 300px);
}

.float-instagram {
  bottom: 32%;
  left: calc(50% - 260px);
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
  100% { transform: translateY(0); }
}

/* Logo */
.auth-logo {
  position: relative;
  z-index: 2;
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

.auth-logo img {
  height: 60px;
  filter: drop-shadow(0 12px 24px rgba(150, 100, 255, 0.45));
}

/* Center card */
.auth-wrapper {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card {
  position: relative;
  z-index: 3;
  width: 420px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 36px;
  box-shadow:
    0 40px 80px rgba(120, 80, 200, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.6);
  backdrop-filter: blur(18px);
  text-align: center;
}

/* Headings */
.auth-card h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
}

.auth-card p {
  margin: 8px 0 28px;
  color: #6b6b88;
}

/* Inputs */
.input-group {
  position: relative;
  margin-bottom: 16px;
}

.input-group img {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  opacity: 0.7;
}

.input-group input {
  width: 100%;
  height: 56px;
  border-radius: 16px;
  border: 1px solid rgba(180, 150, 255, 0.35);
  padding: 0 52px;
  font-size: 15px;
  outline: none;
  background: white;
}

.input-group input:focus {
  border-color: #9b6cff;
  box-shadow: 0 0 0 4px rgba(155, 108, 255, 0.18);
}

.toggle-password {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.toggle-password:hover {
  opacity: 1;
}

/* Primary button */
.primary-btn {
  width: 100%;
  height: 56px;
  margin-top: 12px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, #7a5cff, #ec5bbf);
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(160, 90, 255, 0.45);
}

.primary-btn:hover {
  transform: translateY(-1px);
}

/* Links */
.auth-link {
  margin: 16px 0;
  font-size: 14px;
}

.auth-link a {
  color: #7a5cff;
  text-decoration: none;
}

/* Divider */
.divider {
  margin: 20px 0;
  font-size: 13px;
  color: #999;
}

/* Social buttons */
.social-btn {
  width: 100%;
  height: 52px;
  border-radius: 14px;
  background: white;
  border: 1px solid #e5e0ff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  margin-bottom: 12px;
  cursor: pointer;
  font-weight: 500;
}

.social-btn img {
  width: 22px;
}

/* Footer text */
.auth-footer {
  font-size: 12px;
  color: #888;
  margin-top: 18px;
}

.auth-footer a {
  color: #7a5cff;
  text-decoration: none;
}