/* =========================================================
   Static Noir Mint Dark — Login
   Page: login.html
   - Centered translucent card over video
   - Full-width gradient title bar, centered text
   - Accessible inputs with clear focus glow
   - Button uses site gradient; links styled to match
   ========================================================= */

/* Wrapper: center the card inside main-content */
.login-wrapper{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:12px;
}

/* Card */
.login-form{
  width:min(520px, 100%);
  background:var(--glass);                 /* ~80% opacity to reveal video */
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  backdrop-filter:saturate(1.1) blur(2px);
  padding:var(--pad);
  color:var(--text);
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  overflow:hidden;                          /* keeps title bar corners clean */
}

/* Title bar: full-width gradient, centered text */
.login-title{
  margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 12px;
  padding:12px 14px;
  background:var(--grad-primary);
  color:var(--title-color);                 /* unified title color */
  text-align:center;
  border-top-left-radius:calc(var(--radius) - 2px);
  border-top-right-radius:calc(var(--radius) - 2px);
  font-size:1.25rem;
  line-height:1.2;
}

/* Labels & inputs */
.login-label{
  font-weight:600;
  color:var(--text);
  margin-top:6px;
}



.login-input{ width:100%; }
/* Error flash message */
.login-error{
  background:rgba(255,86,86,.12);
  border:1px solid rgba(255,86,86,.35);
  color:var(--error-text-color);           /* centralized */
  border-radius:12px;
  padding:10px 12px;
}

/* Button — uses site gradient style; full width here */
.btn.login-btn{ width:100%; }
/* Links row */
.login-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:6px;
  color:var(--muted);
}
.login-link{
  color:var(--link-color);
  text-decoration:none;
}
.login-link:hover{ color:var(--link-hover-color); }
.login-separator{ color:var(--border); }

/* Small screens */
@media (max-width: 480px){
  /* relies on global --pad from index.css */
  .login-title{ margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 10px; padding:10px 12px; }
  .login-form{ gap:10px; }
  .btn.login-btn{ width:100%; }
}
/* =========================================================
   Static Noir Mint Dark — Login
   Page: login.html
   - Centered translucent card over video
   - Full-width gradient title bar, centered text
   - Accessible inputs with clear focus glow
   - Button uses site gradient; links styled to match
   ========================================================= */

/* Wrapper: center the card inside main-content */
.login-wrapper {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 12px;
}

/* Card */
.login-form {
  width: min(520px, 100%);
  background: var(--glass);                 /* ~80% opacity to reveal video */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  backdrop-filter: saturate(1.1) blur(2px);
  padding: var(--pad);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;                         /* keeps title bar corners clean */
}

/* Title bar: full-width gradient, centered text */
.login-title {
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 12px;
  padding: 12px 14px;
  background: var(--grad-primary);
  color: var(--title-color);                /* unified title color */
  text-align: center;
  border-top-left-radius: calc(var(--radius) - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  font-size: 1.25rem;
  line-height: 1.2;
}

/* Labels & inputs */
.login-label {
  font-weight: 600;
  color: var(--text);
  margin-top: 6px;
}

/* Error flash message */
.login-error {
  background: rgba(255,86,86,.12);
  border: 1px solid rgba(255,86,86,.35);
  color: var(--error-text-color);           /* centralized */
  border-radius: 12px;
  padding: 10px 12px;
}

/* Button — uses site gradient style; full width here */
.btn.login-btn{ width:100%; }
/* Links row */
.login-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  color: var(--muted);
}

.login-link {
  color: var(--link-color);
  text-decoration: none;
}

.login-link:hover {
  color: var(--link-hover-color);
}

.login-separator {
  color: var(--border);
}

/* Small screens */
@media (max-width: 480px) {
  /* relies on global --pad from index.css */
  .login-title {
    margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 10px;
    padding: 10px 12px;
  }

  .login-form {
    gap: 10px;
  }

  .btn.login-btn{ width:100%; }
}

/* OAuth buttons (no inline styles) */
.oauth-login {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.oauth-btn {
  width: 90%;
  max-width: 420px;
  background: rgba(34,34,34,.65);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.oauth-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow-strong);
}

.oauth-icon {
  height: 20px;
  width: 20px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 2px;
}

/* === Added: OAuth provider modifiers (oauth-google, oauth-github) === */
/* Provider accents (keeps the same base .oauth-btn sizing) */
.oauth-google {
  border-color: rgba(59,130,246,.35);
}

.oauth-github {
  border-color: rgba(148,163,184,.35);
}