:root {
    --glass-bg: rgba(255, 255, 255, .08);
    --glass-brd: rgba(255, 255, 255, .25);
    --glass-shadow: rgba(0, 0, 0, .35);
  }

  * {
    box-sizing: border-box
  }

  html,
  body {
    height: 100%;
    margin: 0;
    background: #000;
    color: #fff;
    font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Arial, sans-serif
  }

.bg-video-wrap {
  position: fixed; inset: 0; overflow: hidden; z-index: 0;
}
.bg-video-wrap video {
  position: absolute; min-width: 100%; min-height: 100%;
  width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.45));
  pointer-events: none;           /* so it never intercepts clicks */
  z-index: 1;                     /* above video, below UI */
}

  /* Everything else sits above the video */
  html,
  body {
    height: 100%;
    background: transparent;
  }

  .page-root,
  .auth-page,
  .auth-card,
  .content-root {
    position: relative;
    z-index: 1;
    background: transparent;
  }

.auth-wrap{
    display:flex;
    justify-content: center;
    align-items: center;
    height:100vh;
}

  /* If your card looked black: give it a translucent “glass” base */
  /* Your existing base styles kept */
.auth-card{
  opacity:0;
  transform:translateY(24px) scale(.96);
  pointer-events:none;

  /* glass + layout */
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:2px solid rgba(255,255,255,.25);
  border-radius:12px; padding:15px;
  display:flex; flex-direction:row; justify-content:center; align-items:center;
  width:fit-content; height:auto;

  position:fixed;            /* <-- so ::after positions correctly */
  bottom:20px; right:20px;   /* <-- anchor where you wanted */
  z-index:2;
  transform-origin:bottom right;
  will-change:transform, opacity;
}

.auth-card.is-live{
  opacity:1;
  pointer-events:auto;
  animation:
    auth-pop-in 600ms cubic-bezier(.2,.8,.2,1) 300ms both,
    auth-bob    5.5s   ease-in-out              2.2s  infinite;
}

.auth-card:hover,
.auth-card:focus-within{ animation-play-state:paused; }

@keyframes auth-pop-in{
  0%   { opacity:0; transform:translateY(14px) scale(.96); }
  55%  { opacity:1; transform:translateY(-6px) scale(1.02); }
  100% { opacity:1; transform:translateY(0)    scale(1); }
}

/* include scale(1) so it doesn’t get overwritten */
@keyframes auth-bob{
  0%,100% { transform:translateY(0)    scale(1); }
  50%     { transform:translateY(-16px) scale(1); }
}

.auth-card::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit;
  border:1px solid rgba(255,255,255,.25); filter:blur(2px); opacity:0; pointer-events:none;
  animation: auth-ring 2.2s ease-out 1.6s 2;
}

@keyframes auth-ring{
  0%   { opacity:0;   transform:scale(.98); }
  30%  { opacity:.7;  transform:scale(1.02); }
  100% { opacity:0;   transform:scale(1.04); }
}

@media (prefers-reduced-motion: reduce){
  .auth-card, .auth-card::after { animation:none !important; }
}




  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .brand .logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: contain;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
  }

  .brand .title {
    font-weight: 700;
    letter-spacing: .2px;
  }

  .muted {
    color: #cbd5e1;
    opacity: .8;
    font-size: .92rem;
    margin-bottom: 12px;
  }

  label {
    display: block;
    font-size: .85rem;
    margin: 8px 0 6px;
    color: #e5e7eb;
  }

  /* Login glass controls */
.control,
.form-control {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  margin: 0 5px;
  padding: 5px 8px;
  border-radius: 8px;
}

.control::placeholder,
.form-control::placeholder { color: rgba(255,255,255,0.7); }

.control:focus,
.form-control:focus {
  outline: none;
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.16);
}


  /* Icon-only submit */
  .submit-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .icon-submit {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
    cursor: pointer;
    color: #fff;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  }

  .icon-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  }

  .icon-submit:active {
    transform: translateY(0);
  }

  .icon-submit i {
    font-size: 1.5rem;
    line-height: 6px;
  }

  .grow {
    flex: 1;
  }

  .error {
    color: #fecaca;
    font-size:13px;
  }

  /* Fallback if no backdrop-filter support */
  @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .auth-card {
      background: rgba(15, 23, 42, .75);
    }
  }

/* ==========================================================================
   Mobile login (phones / narrow windows) — additive only
   ========================================================================== */
@media (max-width: 640px) {
  .auth-wrap { height: 100%; }

  .auth-card {
    left: 14px;
    right: 14px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: auto;
    padding: 14px;
    border-radius: 16px;
    transform-origin: bottom center;
  }
  /* gentler float on small screens */
  .auth-card.is-live {
    animation:
      auth-pop-in 600ms cubic-bezier(.2,.8,.2,1) 300ms both,
      auth-bob-sm 5.5s  ease-in-out              2.2s  infinite;
  }

  .auth-card form { width: 100%; }
  .auth-card form > div {
    flex-wrap: wrap;
    gap: 10px;
  }
  .auth-card .control {
    margin: 0;
    height: 46px;
    padding: 10px 14px;
    font-size: 16px;          /* prevents iOS zoom-on-focus */
    border-radius: 10px;
    min-width: 0;
  }
  #login-username { flex: 1 1 100%; }
  #login-password { flex: 1 1 0; }
  .auth-card .submit-row { flex: 0 0 auto; }
  .auth-card .submit-row .grow { display: none; }
  .icon-submit { width: 46px; height: 46px; }

  #loginToast {
    left: 12px;
    right: 12px;
    width: auto;
    margin: 12px !important;
  }
}

@keyframes auth-bob-sm {
  0%,100% { transform: translateY(0)    scale(1); }
  50%     { transform: translateY(-6px) scale(1); }
}