/* =====================================================================
   Supraja CTF — Auth card (Login / Register)
   ---------------------------------------------------------------------
   Self-contained styling for the login/register split card. Deliberately
   scoped to its own class names (auth-*) so it never has to fight the
   older page CSS or ID-based selectors for specificity — this file is
   the single source of truth for how this card looks.
   ===================================================================== */

:root{
  --auth-navy:      #0a2233;
  --auth-navy-2:    #0d2436;
  --auth-cyan:      #12d6f0;
  --auth-cyan-2:    #08b8e0;
  --auth-mint:      #23e6a3;
  --auth-danger:    #ff5f6d;
  --auth-text:      #eaf4f7;
  --auth-text-dim:  #a9bcc7;
  --auth-border:    rgba(255,255,255,0.14);
}

/* Logo sizing safety rule */
.img, nav img, .navbar-brand img, a img.img {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}

.auth-wrap{
  width: 100%;
  max-width: 960px;
  min-height: calc(100vh - 84px);
  margin: 0 auto !important;
  padding: 32px 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  width: 100%;
  min-height: 520px;
  background: linear-gradient(155deg, rgba(11,32,48,0.72) 0%, rgba(8,22,34,0.82) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--auth-border);
  border-radius: 22px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 1.5px 0 rgba(255,255,255,0.06) inset;
  overflow: hidden;
}

.auth-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  z-index: 5;
  transition: background .2s ease, transform .2s ease;
}
.auth-close:hover{ background: rgba(220,53,69,0.85); transform: scale(1.08); }

.auth-card__media{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(255,255,255,0.03);
}
.auth-card__media img{
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 16px;
  display: block;
}

.auth-card__form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.75rem 2.5rem;
  min-width: 0;
}

.auth-card__form h2{
  color: #fff;
  font-weight: 700;
  text-align: center;
  margin: 0 0 0.5rem 0;
  font-size: 1.35rem;
}

.auth-field{
  position: relative;
  margin-bottom: 0.45rem;
}
.auth-field label{
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--auth-cyan);
  margin-bottom: 0.2rem;
}
.auth-field .form-control,
.auth-field input,
.auth-field input[type="file"]{
  width: 100%;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: var(--auth-text) !important;
  border-radius: 10px !important;
  padding: 0.4rem 0.75rem;
  font-size: 0.88rem;
}
.auth-field input:focus{
  outline: none;
  background: rgba(255,255,255,0.10) !important;
  border-color: var(--auth-cyan) !important;
  box-shadow: 0 0 0 .18rem rgba(18,214,240,0.20);
}
.auth-field input:invalid{
  background: rgba(255,255,255,0.06) !important;
  box-shadow: none;
}
.auth-field input::placeholder{ color: var(--auth-text-dim); }
.auth-field small.auth-hint{
  display: block;
  color: var(--auth-text-dim);
  font-size: 0.75rem;
  margin-top: 0.3rem;
}

/* password fields with the show/hide eye icon */
.password-input-wrapper{ position: relative; }
.auth-field--password input{ padding-right: 2.6rem; }
.auth-field--password .toggle-password{
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--auth-text-dim);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  transition: color .2s ease;
}
.auth-field--password .toggle-password:hover{ color: var(--auth-cyan); }

/* native file-input button re-skinned to match the dark theme */
.auth-field input[type="file"]{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.auth-field input[type="file"]::file-selector-button,
.auth-field input[type="file"]::-webkit-file-upload-button{
  margin-right: 12px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 500;
  cursor: pointer;
}
.auth-field input[type="file"]::file-selector-button:hover,
.auth-field input[type="file"]::-webkit-file-upload-button:hover{
  background: rgba(18,214,240,0.30);
}

/* Chrome/Edge/Safari autofill override */
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--auth-text) !important;
  caret-color: var(--auth-text) !important;
  -webkit-box-shadow: 0 0 0 1000px #16344a inset !important;
  box-shadow: 0 0 0 1000px #16344a inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

.auth-forgot{
  display: block;
  text-align: right;
  color: var(--auth-text);
  font-size: 0.85rem;
  text-decoration: none;
  margin: -0.4rem 0 0.75rem 0;
}
.auth-forgot:hover{ color: var(--auth-cyan); }

/* password strength meter */
.password-strength{
  margin-top: 0.6rem;
  display: none;
}
.password-strength h6{
  font-size: 0.78rem;
  color: var(--auth-text-dim);
  margin-bottom: 0.3rem;
}
.password-strength .progress{
  height: 5px;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  overflow: hidden;
}
.password-strength .progress-bar{ transition: width .3s ease; }
.password-suggestions ul{
  margin: 0.4rem 0 0 0;
  padding-left: 1.1rem;
}
.password-suggestions li{
  font-size: 0.75rem;
  color: var(--auth-text-dim);
}

/* messages */
.message-box{
  font-size: 0.85rem;
  text-align: center;
  border-radius: 8px;
}
.message-box:empty{ display: none; }
.auth-card__form .message-box,
.auth-card__form #message > div{
  margin-bottom: 0.9rem;
}
.error-message{
  background: rgba(255,95,109,0.16);
  border: 1px solid rgba(255,95,109,0.45);
  color: #ffd7da;
  font-size: 0.82rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  margin-top: 0.4rem;
}
.message-box.success{
  background: rgba(35,230,163,0.16);
  border: 1px solid rgba(35,230,163,0.5);
  color: #d7fff0;
  padding: 0.55rem 0.75rem;
}

/* ---------------------------------------------------------------
   Actions — small submit + cancel button, side by side
--------------------------------------------------------------- */
.auth-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
  flex-wrap: wrap;
}
.auth-btn{
  flex: 0 0 auto;
  min-width: 110px;
  padding: 0.5rem 1.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, background .2s ease;
  text-align: center;
}
.auth-btn:hover{ transform: translateY(-2px); }
.auth-btn:active{ transform: translateY(0); }
.auth-btn--primary{
  background: linear-gradient(135deg, var(--auth-mint), var(--auth-cyan-2));
  border: none;
  color: #052318;
  box-shadow: 0 6px 20px rgba(18,214,240,0.28);
}
.auth-btn--primary:hover{ filter: brightness(1.06); }
.auth-btn--ghost{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff;
}
.auth-btn--ghost:hover{ background: rgba(255,255,255,0.14); }

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */
@media (max-width: 860px){
  .auth-wrap{ min-height: auto; padding: 100px 15px 40px; }
  .auth-card{ grid-template-columns: 1fr; min-height: 0; }
  .auth-card__media{ padding: 1.75rem 1.75rem 0.5rem 1.75rem; }
  .auth-card__media img{ max-width: 260px; }
  .auth-card__form{ padding: 1.5rem 1.75rem 2rem 1.75rem; }
}
@media (max-width: 480px){
  .auth-wrap{ padding: 100px 12px 32px; }
  .auth-card__form{ padding: 1.25rem 1.25rem 1.75rem 1.25rem; }
  .auth-card__form h2{ font-size: 1.4rem; }
}