/* ==========================================================================
   NEXORA AI — Sign-In Page Styles

   This file styles signin.html only. It depends on the shared design
   tokens (CSS variables), font import, base reset, and reusable
   component classes (.btn, .brand, etc.) defined in style.css.

   Load order in signin.html:
     1. style.css        (shared tokens, reset, buttons, brand mark)
     2. signinstyles.css  (this file — sign-in page specific rules)
   ========================================================================== */

.signin-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Decorative animated background, layered behind everything */
.signin-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.signin-bg__grid {
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.35;
  mask-image: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.6), transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.6), transparent 70%);
}
.signin-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  background-size: 200% 200%;
  animation: gradientShift 14s ease-in-out infinite;
}
.signin-bg__orb--1 {
  width: 420px;
  height: 420px;
  top: -120px;
  left: -100px;
  background: radial-gradient(circle, rgba(124, 92, 252, 0.35), transparent 70%);
}
.signin-bg__orb--2 {
  width: 460px;
  height: 460px;
  bottom: -160px;
  right: -140px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.28), transparent 70%);
}

.signin-header {
  padding: 24px 24px 0;
}
.back-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.back-link:hover {
  color: var(--text);
}
.back-link__arrow {
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.2s ease;
}
.back-link:hover .back-link__arrow {
  transform: translateX(-3px);
}

.signin-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 64px;
}

.signin-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: fadeInUp 0.6s ease both;
  text-align: center;
}

.signin-brand {
  justify-content: center;
  margin-bottom: 28px;
}

.signin-heading {
  font-size: 1.7rem;
  margin-bottom: 0.3em;
}
.signin-sub {
  font-size: 0.92rem;
  margin-bottom: 32px;
}

.signin-form {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.signin-form > * {
  margin-top: 18px;
}
.signin-form > *:first-child {
  margin-top: 0;
}

.form-field {
  display: flex;
  flex-direction: column;
}
.form-field label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.form-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.form-field__row label { margin-bottom: 0; }
.forgot-link {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent-2);
  margin-left: 12px;
  transition: opacity 0.2s ease;
}
.forgot-link:hover { opacity: 0.8; }

.form-field input[type="email"],
.form-field input[type="password"] {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: var(--text);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-field input::placeholder {
  color: var(--text-faint);
}
.form-field input:hover {
  border-color: var(--border-strong);
}
.form-field input:focus {
  outline: none;
  border-color: var(--accent-2);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.14);
}

.form-remember {
  display: flex;
  align-items: center;
}
.form-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 9px 0 0;
  accent-color: var(--accent-2);
  cursor: pointer;
  flex-shrink: 0;
}
.form-remember label {
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
}

.signin-form .btn--lg {
  padding: 15px 26px;
}

.signin-divider {
  display: flex;
  align-items: center;
  margin: 30px 0 22px;
}
.signin-divider::before,
.signin-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.signin-divider span {
  font-size: 0.78rem;
  color: var(--text-faint);
  white-space: nowrap;
  margin: 0 14px;
}

.social-buttons {
  display: flex;
  flex-direction: column;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.social-btn + .social-btn {
  margin-top: 12px;
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  flex-shrink: 0;
}
.social-icon svg {
  width: 100%;
  height: 100%;
}
.social-btn__label {
  line-height: 1;
}

.signin-footer-text {
  margin: 28px 0 0;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.signin-footer-link {
  color: var(--accent-2);
  font-weight: 600;
  margin-left: 4px;
  transition: opacity 0.2s ease;
}
.signin-footer-link:hover { opacity: 0.8; }

/* Sign-in responsive adjustments */
@media (max-width: 480px) {
  .signin-header { padding: 20px 18px 0; }
  .signin-main { padding: 28px 18px 48px; }
  .signin-card {
    padding: 32px 24px;
    border-radius: var(--radius-md);
  }
  .signin-heading { font-size: 1.5rem; }
}

@media (max-width: 360px) {
  .signin-card { padding: 26px 18px; }
  .signin-brand .brand__name { font-size: 1rem; }
  .form-field__row {
    flex-direction: column;
    align-items: flex-start;
  }
  .forgot-link { margin-left: 0; margin-top: 4px; }
}