/* Sign-in page — matches the vapptrix.com glass theme (light glass, frosted
   tiles in the logo gradient, navy + grey-blue type, gradient pill button).
   Loaded after style.css so it only overrides what the login page needs. */

.login-page {
  --lg-navy: #121a3a;
  --lg-muted: #9ba6c2;
  --lg-text: #4a5470;
  --lg-grad: linear-gradient(90deg, #1575fb 0%, #4459f1 22%, #7f41e9 44%, #bb3de1 64%, #df4094 82%, #fc6b4a 100%);
  min-height: 100vh; margin: 0; overflow-x: hidden;
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  color: var(--lg-navy);
  background:
    radial-gradient(38% 45% at 8% 6%, rgba(93,143,247,.14), transparent 70%),
    radial-gradient(34% 40% at 96% 10%, rgba(214,106,220,.11), transparent 70%),
    radial-gradient(120% 70% at 60% 0%, #fbfbfd 0%, #f6f7fa 45%, #eef0f5 100%);
}

/* ---------- frosted tiles across the whole page ---------- */
html:has(.login-page) { height: 100%; }
.login-page { height: 100%; overflow: hidden; }                 /* one screen, no scrolling */
.lg-band { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.lg-tiles {
  --cols: 14;
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 5px; isolation: isolate;
}
.lg-tiles::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40% 70% at 12% 85%, rgba(93,143,247,.95), transparent 70%),
    radial-gradient(35% 60% at 45% 90%, rgba(56,34,251,.55), transparent 70%),
    radial-gradient(35% 70% at 80% 70%, rgba(214,106,220,.85), transparent 70%),
    radial-gradient(25% 60% at 100% 95%, rgba(245,154,95,.9), transparent 70%),
    linear-gradient(90deg, #5d8ff7 0%, #6e74f6 30%, #8f63f2 52%, #d26ad8 76%, #f59a5f 100%);
  /* colour only behind the bottom rows */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 72%, rgba(0,0,0,.55) 82%, #000 92%);
          mask-image: linear-gradient(to bottom, transparent 0%, transparent 72%, rgba(0,0,0,.55) 82%, #000 92%);
}
.lg-tiles .t { aspect-ratio: 1; border-radius: 20px; }
.lg-tiles .t.ghost {
  background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(246,247,251,.42));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.5);
}
.lg-tiles .t.faint {
  background: radial-gradient(120% 90% at 25% 15%, rgba(255,255,255,.5), transparent 60%), rgba(255,255,255,.45);
  box-shadow: inset 0 1px 1.5px rgba(255,255,255,.9);
}
.lg-tiles .t.color {
  background: radial-gradient(120% 90% at 25% 15%, rgba(255,255,255,.5), transparent 60%), rgba(255,255,255,.18);
  box-shadow: inset 0 1px 1.5px rgba(255,255,255,.9), inset 0 0 26px rgba(255,255,255,.35);
}

/* ---------- card ---------- */
.lg-wrap { position: relative; z-index: 1; height: 100vh; height: 100dvh; display: grid; place-items: center; padding: 20px 16px; box-sizing: border-box; }
.lg-card {
  width: min(440px, 100%); box-sizing: border-box; padding: 40px 38px 30px; border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
  border: 1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 #fff, 0 40px 80px -40px rgba(30,30,100,.45), 0 2px 6px rgba(18,26,58,.04);
}
.lg-logo { display: inline-flex; margin-bottom: 26px; }
.lg-logo img { height: 44px; width: auto; display: block; }
.lg-title { margin: 0 0 6px; font-size: 38px; font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
.lg-title b { font-weight: inherit; color: var(--lg-navy); }
.lg-title em { font-style: normal; color: var(--lg-muted); }
.lg-sub { margin: 0 0 26px; font-size: 16px; color: var(--lg-text); }

/* ---------- form ---------- */
.lg-card .alert { border-radius: 14px; margin-bottom: 16px; }
.lg-card .field { margin-bottom: 16px; }
.lg-card .field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 500; color: var(--lg-navy); }
.lg-card .input {
  width: 100%; height: 52px; box-sizing: border-box; padding: 0 16px; border-radius: 14px;
  font-family: inherit; font-size: 15.5px; color: var(--lg-navy);
  background: rgba(255,255,255,.92); border: 1.5px solid rgba(18,26,58,.12);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.lg-card .input::placeholder { color: #9aa3ba; }
.lg-card .input:hover { border-color: rgba(18,26,58,.2); }
.lg-card .input:focus { outline: none; background: #fff; border-color: #7f41e9; box-shadow: 0 0 0 4px rgba(127,65,233,.14); }
.lg-card .input-wrap .input { padding-right: 48px; }
.lg-card .toggle-eye { right: 8px; border-radius: 10px; }

.lg-card .lg-btn {
  width: 100%; height: 54px; margin-top: 8px; border: 0; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 17px; font-weight: 500; color: #fff;
  background: var(--lg-grad);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 20px 32px -14px rgba(120,60,230,.6), 0 6px 12px -6px rgba(200,60,140,.35);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s, box-shadow .25s;
}
.lg-card .lg-btn:hover { transform: translateY(-2px); filter: brightness(1.08) saturate(1.1); }
.lg-card .lg-btn:disabled { opacity: .85; transform: none; cursor: wait; }

/* ---------- footer ---------- */
.lg-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(18,26,58,.07); font-size: 14px; }
.lg-secure { display: inline-flex; align-items: center; gap: 7px; color: #15803d; font-weight: 500; }
.lg-secure svg { width: 16px; height: 16px; }
.lg-back { color: var(--lg-text); text-decoration: none; font-weight: 500; }
.lg-back:hover { color: #7f41e9; }

@media (max-width: 720px) {
  .lg-tiles { --cols: 5; }
  .lg-tiles .c5, .lg-tiles .c6, .lg-tiles .c7, .lg-tiles .c8, .lg-tiles .c9,
  .lg-tiles .c10, .lg-tiles .c11, .lg-tiles .c12, .lg-tiles .c13 { display: none; }
  .lg-tiles .t { border-radius: 16px; }
}
@media (max-width: 520px) {
  .lg-card { padding: 30px 22px 22px; border-radius: 24px; }
  .lg-title { font-size: 32px; }
}
/* very short screens (e.g. a phone held sideways): allow scrolling so the card is never cut off */
@media (max-height: 620px) {
  .login-page { overflow: auto; }
  .lg-wrap { height: auto; min-height: 100vh; padding: 24px 16px; }
}