/* NOVA login – neutral glass card over a soft aurora made from all five theme colours (public/css/login.css) */
:root{
  --lg-ink: #0f172a; --lg-muted: #5b6474; --lg-line: rgba(15, 23, 42, .12); --lg-field: rgba(255, 255, 255, .7);
  --lg-focus: #0070a0; --lg-danger: #c62828;
  /* theme colours: Mystic, Oceanic, Azure, Lavender, Aqua */
  --t1: #830383; --t2: #050f72; --t3: #00709c; --t4: #5c5086; --t5: #7fd6d0;
}
*, *::before, *::after{box-sizing: border-box}
html, body.lg-body{min-height: 100%}
body.lg-body{margin: 0; font-family: "Poppins", Arial, sans-serif; color: var(--lg-ink); background: #eef2f7; position: relative; overflow-x: hidden}
/* aurora */
body.lg-body::before{content: ""; position: fixed; inset: -10%; z-index: 0; pointer-events: none; filter: blur(3.5rem); opacity: .55;
  background:
    radial-gradient(30rem 24rem at 12% 18%, var(--t1), transparent 70%),
    radial-gradient(28rem 22rem at 88% 12%, var(--t3), transparent 70%),
    radial-gradient(30rem 24rem at 80% 88%, var(--t5), transparent 70%),
    radial-gradient(26rem 20rem at 18% 85%, var(--t2), transparent 70%),
    radial-gradient(22rem 18rem at 52% 50%, var(--t4), transparent 70%)}
/* fine grid for texture */
body.lg-body::after{content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 3rem 3rem}

.lg-page{position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; min-height: 100vh; min-height: 100dvh; padding: 2rem 1rem}

.lg-card{width: 100%; max-width: 27rem; padding: 2.5rem 2.25rem; border: 1px solid rgba(255, 255, 255, .7); border-radius: 1.5rem;
  background: rgba(255, 255, 255, .62); backdrop-filter: blur(1.5rem) saturate(1.4); -webkit-backdrop-filter: blur(1.5rem) saturate(1.4);
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, .18)}
.lg-logo{display: block; width: 12rem; max-width: 70%; height: auto; margin: 0 auto 1.75rem}
.lg-title{margin: 0; font-size: 1.75rem; font-weight: 700; text-align: center}
.lg-sub{margin: .5rem 0 2rem; font-size: .9rem; line-height: 1.55; color: var(--lg-muted); text-align: center}
.lg-alert{margin-bottom: 1.25rem; padding: .75rem 1rem; border-radius: .75rem; background: rgba(0, 112, 160, .1); color: var(--lg-focus); font-size: .9rem}

.lg-field{margin-bottom: 1.15rem}
.lg-label{display: block; margin-bottom: .45rem; font-size: .85rem; font-weight: 600}
.lg-control{position: relative}
.lg-icon{position: absolute; top: 50%; left: 1rem; width: 1.15rem; height: 1.15rem; transform: translateY(-50%); color: var(--lg-muted); pointer-events: none}
.lg-input{display: block; width: 100%; height: 3.1rem; margin: 0; padding: 0 1rem 0 2.85rem; border: 1px solid var(--lg-line); border-radius: .875rem; background: var(--lg-field); color: var(--lg-ink); font: inherit; font-size: .95rem; outline: 0; transition: border-color .15s, box-shadow .15s, background .15s}
.lg-input--pw{padding-right: 3.25rem}
.lg-input::placeholder{color: #8b93a1; opacity: 1}
.lg-input:focus{border-color: var(--lg-focus); background: #fff; box-shadow: 0 0 0 .25rem rgba(0, 112, 160, .15)}
.lg-control:focus-within .lg-icon{color: var(--lg-focus)}
.lg-input.is-invalid{border-color: var(--lg-danger); background: #fff6f6}
.lg-error{display: block; margin-top: .4rem; font-size: .85rem; color: var(--lg-danger)}
.lg-eye{position: absolute; top: 50%; right: .5rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: .5rem; background: transparent; color: var(--lg-muted); cursor: pointer; transform: translateY(-50%)}
.lg-eye svg{width: 1.2rem; height: 1.2rem}
.lg-eye:hover, .lg-eye[aria-pressed="true"]{color: var(--lg-focus); background: rgba(0, 112, 160, .08)}
.lg-eye:focus-visible{outline: 2px solid var(--lg-focus); outline-offset: 2px}

.lg-btn{display: block; width: 100%; height: 3.1rem; margin-top: 1.75rem; border: 0; border-radius: .875rem; background: var(--lg-ink); color: #fff; font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; box-shadow: 0 .6rem 1.5rem rgba(15, 23, 42, .25); transition: transform .15s, box-shadow .15s, background .15s}
.lg-btn:hover{background: #1e293b; transform: translateY(-1px); box-shadow: 0 .8rem 1.75rem rgba(15, 23, 42, .3)}
.lg-btn:focus-visible{outline: 3px solid rgba(0, 112, 160, .45); outline-offset: 3px}

.lg-copy{margin: 0; font-size: .8rem; color: var(--lg-muted); text-align: center}

@media (max-width: 480px){
  .lg-card{padding: 2rem 1.25rem; border-radius: 1.25rem}
  .lg-title{font-size: 1.5rem}
}
@media (prefers-reduced-motion: reduce){.lg-btn, .lg-input{transition: none}}