/* Auth modal + admin trigger styling */

/* small "?" admin trigger */
.admin-trigger {
  position: fixed; top: 6px; right: 8px; z-index: 90;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--black); color: var(--yellow);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700;
  border: 1px solid var(--black);
  text-decoration: none; cursor: pointer; opacity: 0.55;
  transition: all .2s ease;
}
.admin-trigger:hover { opacity: 1; background: var(--yellow); color: var(--black); transform: scale(1.15);}

/* overlay */
.auth-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: authFadeIn .2s ease;
}
@keyframes authFadeIn { from { opacity: 0; } to { opacity: 1; } }

.auth-card {
  background: var(--charcoal); border: 1px solid #2a2722;
  padding: 36px 36px 28px; width: min(440px, 100%);
  position: relative; color: var(--white);
  font-family: 'Space Grotesk', sans-serif;
  animation: authSlide .25s cubic-bezier(.6,0,.2,1);
}
@keyframes authSlide { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.auth-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #3a3630; background: transparent; color: var(--white);
  cursor: pointer; transition: all .15s;
}
.auth-close:hover { background: var(--yellow); border-color: var(--yellow); color: var(--black);}

.auth-back {
  background: transparent; border: none; color: #807a6c; cursor: pointer;
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
  padding: 0; margin-bottom: 18px; text-transform: uppercase;
}
.auth-back:hover { color: var(--yellow);}

.auth-brand {
  display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
}
.auth-brand img { width: 24px; height: 24px; }
.auth-brand span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--pink);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.auth-brand-small { color: #c9c5b8; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; gap: 8px;}
.auth-brand-small span { font-family: inherit; font-size: inherit; letter-spacing: inherit;}

.auth-card h2 {
  font-family: 'Archivo Black'; font-size: 26px; line-height: 1.05;
  letter-spacing: -0.01em; margin: 0 0 10px;
}
.auth-sub {
  font-size: 14px; color: #b5b0a2; line-height: 1.5; margin: 0 0 24px;
  text-wrap: pretty;
}

.auth-providers { display: flex; flex-direction: column; gap: 10px; }
.auth-provider {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 18px; border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .15s ease;
  border: 1px solid #3a3630;
  background: var(--black); color: var(--white);
}
.auth-provider > span:first-of-type { flex: 1; text-align: left;}
.auth-provider .auth-arrow { opacity: 0.5; transition: transform .15s; }
.auth-provider:hover { border-color: var(--yellow); }
.auth-provider:hover .auth-arrow { opacity: 1; transform: translateX(3px); color: var(--yellow);}
.auth-provider-google { background: #fff; color: #1a1a1a; border-color: #fff;}
.auth-provider-google:hover { background: #f4f1e8; border-color: #f4f1e8;}
.auth-provider-google .auth-arrow { color: #5a5a5a;}
.auth-provider-apple { background: #fff; color: #000; border-color: #fff;}
.auth-provider-apple:hover { background: #f4f1e8; border-color: #f4f1e8;}
.auth-provider-apple .auth-arrow { color: #5a5a5a;}
.auth-provider-email { background: var(--yellow); color: var(--black); border-color: var(--yellow);}
.auth-provider-email:hover { background: var(--white); border-color: var(--white);}
.auth-provider-email .auth-arrow { color: var(--black); opacity: 0.6;}

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Space Mono', monospace; font-size: 10px; color: #6a6557;
  letter-spacing: 0.18em; text-transform: uppercase; margin: 6px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: #2a2722;
}

.auth-fine {
  margin: 24px 0 0; font-family: 'Space Mono', monospace; font-size: 10px;
  color: #6a6557; line-height: 1.5; text-wrap: pretty;
  letter-spacing: 0.04em;
}
.auth-fine a { color: var(--yellow); border-bottom: 1px dotted; }

/* email form */
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; }
.auth-form label > span {
  font-family: 'Space Mono', monospace; font-size: 11px;
  color: #807a6c; letter-spacing: 0.12em; text-transform: uppercase;
}
.auth-form label > span em { font-style: normal; opacity: 0.6; text-transform: none; margin-left: 4px;}
.auth-form input {
  background: var(--black); border: 1px solid #3a3630;
  color: var(--white); padding: 12px 14px; font-size: 15px;
  font-family: inherit; border-radius: 4px;
  transition: border-color .15s;
}
.auth-form input:focus { outline: none; border-color: var(--yellow);}
.auth-form input::placeholder { color: #4a463d;}

.auth-submit {
  margin-top: 6px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-radius: 999px; border: none;
  background: var(--yellow); color: var(--black);
  font-family: 'Archivo Black'; font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  transition: all .15s;
}
.auth-submit:hover:not(:disabled) { background: var(--white);}
.auth-submit:disabled { opacity: 0.4; cursor: not-allowed;}

/* success */
.auth-success { text-align: center; padding: 20px 0; }
.auth-check {
  width: 80px; height: 80px; margin: 0 auto 22px;
  border-radius: 50%; background: var(--yellow); color: var(--black);
  display: inline-flex; align-items: center; justify-content: center;
  animation: checkPop .35s cubic-bezier(.5,1.5,.5,1);
  box-shadow: 0 0 0 10px rgba(232,214,14,0.12), 0 0 0 22px rgba(232,214,14,0.06);
}
@keyframes checkPop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 600px) {
  .auth-card { padding: 28px 24px;}
  .auth-card h2 { font-size: 22px;}
}