/* SkillClimber Brand Styles (blue/yellow) */
/* Global tweaks kept minimal to avoid fighting themes */
:root{
  /* Provided by PHP as inline: --sc-blue, --sc-yellow, --sc-logo */
}

.scauth{
  max-width: 480px;
  margin: 3rem auto;
  padding: 2rem 2.5rem;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  position: relative;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.scauth::before{
  content: "";
  display: block;
  background-image: var(--sc-logo);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 120px auto;
  height: 120px;
  margin: 0 auto 1.25rem;
}
.scauth h2{
  text-align:center;
  font-weight:700;
  color: var(--sc-blue);
  margin-bottom: 1rem;
  letter-spacing:.3px;
}
.scauth-field{display:flex;flex-direction:column;gap:.25rem;margin:.5rem 0}
.scauth-field label{font-weight:600;color:#333}
.scauth-field input{
  border-radius:12px;border:1px solid #ccd3da;padding:.75rem;font-size:.95rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.scauth-field input:focus{
  border-color:var(--sc-blue);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sc-blue) 20%, transparent);
  outline:none;
}
.scauth-button{
  display:block;width:100%;padding:.9rem 1rem;border-radius:10px;border:none;
  background:var(--sc-blue);color:#fff;font-weight:700;letter-spacing:.5px;
  transition:background .2s ease;
}
.scauth-button:hover{background:#003d56}
.scauth-button--secondary{background:var(--sc-yellow);color:#222}
.scauth-button--secondary:hover{background:#f4c800}
.scauth-tablist{display:flex;justify-content:center;gap:1rem;margin-bottom:1.2rem}
.scauth-tablist button{
  border-radius:10px;padding:.5rem 1rem;font-weight:600;
  border:2px solid var(--sc-blue);background:#fff;color:var(--sc-blue);
  cursor:pointer;transition:all .2s ease;
}
.scauth-tablist button.is-active{background:var(--sc-blue);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.scauth-messages{margin-bottom:1rem}
.scauth-msg{background:#fffbe6;border:1px solid var(--sc-yellow);padding:.6rem .8rem;border-radius:8px;font-size:.92rem;color:#444}
.scauth-links{text-align:center;margin-top:1rem;font-size:.92rem}
.scauth-links a{color:var(--sc-blue);text-decoration:none;font-weight:500}
.scauth-links a:hover{text-decoration:underline}
@media (max-width:500px){
  .scauth{padding:1.5rem}
  .scauth::before{background-size:100px auto;height:100px}
}

/* Optional issuer/directory polish if those plugins are active */
.scop-issuer__logo, .scdir__logo{border:2px solid color-mix(in srgb, var(--sc-blue) 25%, #fff);}
.scop-badge, .scdir__card{border-color:#e8eef2}
.scop-badge__title, .scdir__name{color:#0b2a3c}
.scop-badge__link, .scdir__meta a{color:var(--sc-blue)}
.scop-alert--ok{background:color-mix(in srgb, var(--sc-yellow) 25%, #fff);border-color:var(--sc-yellow)}