/* ==========================================================================
   VICC v65 — sign-in
   The login card was sized for a phone and adrift on a desktop monitor.
   This scales it up, gives it real presence, and matches the holographic
   theme the rest of the application now uses.
   ========================================================================== */

.auth {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  position: relative; z-index: 1;
}

/* Card ------------------------------------------------------------------- */
.auth-box {
  width: 100%;
  max-width: 480px;                 /* was 380 */
  position: relative;
}

/* A wide bloom sits behind the card so it reads as lit from within. */
.auth-box::after {
  content: ""; position: absolute; inset: -80px -60px;
  background:
    radial-gradient(50% 40% at 50% 22%, rgba(52,231,255,.20), transparent 68%),
    radial-gradient(46% 38% at 26% 78%, rgba(168,85,255,.16), transparent 66%),
    radial-gradient(46% 38% at 76% 74%, rgba(255,77,216,.13), transparent 66%);
  filter: blur(24px); pointer-events: none; z-index: -1;
  animation: auth-bloom 12s ease-in-out infinite alternate;
}
@keyframes auth-bloom {
  0%   { transform: scale(1) translateY(0); opacity: .85; }
  100% { transform: scale(1.08) translateY(-8px); opacity: 1; }
}

/* Brand ------------------------------------------------------------------ */
.auth-head { text-align: center; margin-bottom: 30px; }
.auth-head img {
  max-width: 190px !important;      /* was 168 */
  margin: 0 auto 20px !important;
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 20px 60px rgba(0,0,0,.6),
    0 0 80px rgba(52,231,255,.28);
  animation: auth-float 8s ease-in-out infinite;
}
@keyframes auth-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }

.auth-head .mark {
  display: inline-flex; align-items: center; gap: 12px;
  font: 800 24px/1 var(--sans);     /* was 16 */
  letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(100deg, #fff 10%, var(--cyan, #34E7FF) 48%, var(--purple, #A855FF) 88%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(52,231,255,.4));
}
.auth-head .mark .lamp { -webkit-text-fill-color: initial; width: 12px; height: 12px; }
.auth-head p {
  margin: 12px 0 0; font-size: 15px;   /* was 13 */
  color: var(--cyan, #34E7FF); opacity: .85; letter-spacing: .02em;
}

/* Panel ------------------------------------------------------------------ */
.auth-box .panel { margin: 0; border-radius: 20px; overflow: hidden; }
.auth-box .panel-body { padding: 34px 32px !important; }   /* was 26 */

/* Fields ----------------------------------------------------------------- */
.auth-box .field { margin-bottom: 20px; }
.auth-box .field > span {
  font-size: 10.5px; letter-spacing: .18em; margin-bottom: 3px;
  color: var(--muted, #8493BC);
}
.auth-box input {
  padding: 14px 16px !important;     /* was 10 */
  font-size: 16px !important;
  border-radius: 12px !important;
  letter-spacing: .02em;
}
.auth-box input:focus {
  box-shadow: 0 2px 12px rgba(0,0,0,.35) inset,
              0 0 0 3px rgba(52,231,255,.18),
              0 0 44px rgba(52,231,255,.28) !important;
}
.auth-box .hint { font-size: 12.5px; margin-top: 3px; }

/* Sign in ---------------------------------------------------------------- */
.auth-box .btn {
  width: 100%;
  padding: 16px !important;          /* was 10 */
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 12px !important;
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(52,231,255,.32), rgba(168,85,255,.28)) !important;
  border-color: rgba(52,231,255,.55) !important;
  color: #F2FDFF !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset,
              0 0 50px rgba(52,231,255,.32),
              0 10px 30px rgba(0,0,0,.45);
}
.auth-box .btn:hover {
  background: linear-gradient(135deg, rgba(52,231,255,.44), rgba(168,85,255,.38)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.26) inset,
              0 0 70px rgba(52,231,255,.45),
              0 14px 36px rgba(0,0,0,.5);
  transform: translateY(-2px);
}
.auth-box .btn:active { transform: translateY(0); }

/* Footer ----------------------------------------------------------------- */
.auth-foot {
  margin-top: 26px; padding-top: 20px; font-size: 12.5px; line-height: 1.7;
  border-top: 1px solid var(--line-soft, rgba(255,255,255,.055));
}
.auth-foot code {
  background: rgba(52,231,255,.12); border-color: rgba(52,231,255,.3);
  color: var(--cyan, #34E7FF); padding: 2px 7px; border-radius: 5px;
}

/* Error ------------------------------------------------------------------ */
.auth-box .notice { border-radius: 12px; padding: 14px 16px; font-size: 14px; }

@media (max-width: 560px) {
  .auth { padding: 24px 16px; }
  .auth-box .panel-body { padding: 26px 22px !important; }
  .auth-head .mark { font-size: 19px; }
  .auth-head img { max-width: 150px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-head img, .auth-box::after { animation: none !important; }
}