/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.3.2_@babel+core@7.28.3_@opentelemetry+api@1.9.0_babel-plugin-macros@3.1.0_react_b96ec7ccd42121815703c9bdcef6984b/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/.pnpm/next@15.3.2_@babel+core@7.28.3_@opentelemetry+api@1.9.0_babel-plugin-macros@3.1.0_react_b96ec7ccd42121815703c9bdcef6984b/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/components/auth/auth-layout.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Auth layout specific styles */
.auth-layout-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(135deg, 
    hsl(var(--background)) 0%, 
    hsl(var(--background) / 0.98) 50%, 
    hsl(var(--muted) / 0.1) 100%);
}

.auth-content-wrapper {
  position: relative;
  width: 100%;
  max-width: min(90vw, 600px);
  margin: 0 auto;
}

.auth-decoration {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.auth-decoration::before,
.auth-decoration::after {
  content: '';
  position: absolute;
  width: 20rem;
  height: 20rem;
  background: hsl(var(--primary) / 0.05);
  border-radius: 50%;
  filter: blur(3rem);
}

.auth-decoration::before {
  top: -10rem;
  right: -10rem;
}

.auth-decoration::after {
  bottom: -10rem;
  left: -10rem;
}

.auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: hsl(var(--primary));
  margin-bottom: 0.5rem;
  letter-spacing: -0.025em;
}

.auth-subtitle {
  font-size: 1rem;
  color: hsl(var(--muted-foreground));
  margin: 0 auto;
}

.auth-form-card {
  width: 100%;
  min-width: 320px;
  margin: 0 auto;
  background: hsl(var(--card) / 0.95);
  backdrop-filter: blur(0.5rem);
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  transition: all 0.2s;
}

.auth-form-card:hover {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.35);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .auth-layout-container {
    padding: 1rem;
  }
  
  .auth-content-wrapper {
    max-width: 95vw;
  }
  
  .auth-title {
    font-size: 2rem;
  }
  
  .auth-subtitle {
    font-size: 0.875rem;
  }
  
  .auth-form-card {
    min-width: 280px;
  }
}

@media (min-width: 641px) {
  .auth-layout-container {
    padding: 1.5rem;
  }
  
  .auth-content-wrapper {
    max-width: 80vw;
  }
}

@media (min-width: 1024px) {
  .auth-layout-container {
    padding: 2rem;
  }
  
  .auth-content-wrapper {
    max-width: 600px;
  }
}