/* ═══════════════════════════════════════════
   Night Sky Auth — login & register
   ═══════════════════════════════════════════ */

body.night-auth-body {
    margin:0; padding:0; overflow:hidden;
    height:100vh; min-height:100vh;
}

/* ── Shared nl-* system (login style) used by register too ── */
body.nl-body { margin:0; padding:0; overflow:hidden; height:100vh; }
.nl-page { position:fixed; inset:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.nl-bg { position:absolute; inset:0; pointer-events:none; transition:opacity 3s ease; }
.nl-bg-1 { background:linear-gradient(160deg,var(--nl-sky1,#1a0e38),var(--nl-sky2,#2a1458)); opacity:1; }
.nl-bg-2 { background:linear-gradient(160deg,var(--nl-sky2,#2a1458),var(--nl-sky3,#360a3a)); opacity:0; }
.nl-bg-3 { background:linear-gradient(160deg,var(--nl-sky3,#360a3a),var(--nl-sky1,#1a0e38)); opacity:0; }
.nl-aurora { position:absolute; pointer-events:none; border-radius:50%; filter:blur(70px); mix-blend-mode:screen; opacity:.5; z-index:1; }
.nl-aurora-1 { width:660px; height:290px; background:radial-gradient(ellipse,var(--nl-c1,#8b5cf6),transparent 70%); top:1%; left:-10%; animation:nlA1 13s ease-in-out infinite alternate; }
.nl-aurora-2 { width:540px; height:250px; background:radial-gradient(ellipse,var(--nl-c2,#c084fc),transparent 70%); top:9%; right:-8%; animation:nlA2 17s ease-in-out infinite alternate; }
.nl-aurora-3 { width:730px; height:240px; background:radial-gradient(ellipse,var(--nl-c3,#7c3aed),transparent 70%); top:26%; left:16%; animation:nlA3 22s ease-in-out infinite alternate; }
@keyframes nlA1 { 0%{transform:translate(0,0) scaleX(1);} 50%{transform:translate(120px,50px) scaleX(1.15);} 100%{transform:translate(45px,85px) scaleX(.9);} }
@keyframes nlA2 { 0%{transform:translate(0,0) scaleY(1);} 50%{transform:translate(-85px,65px) scaleY(1.2);} 100%{transform:translate(-145px,22px) scaleY(.85);} }
@keyframes nlA3 { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(65px,-32px) scale(1.1);} 100%{transform:translate(-65px,52px) scale(.94);} }
.nl-stars { position:absolute; inset:0; pointer-events:none; z-index:2; }
.nl-svg   { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
/* ── Split layout ── */
.nl-split {
  position:relative; z-index:20;
  display:flex; align-items:center;
  width:100%; min-height:100%;
  max-width:1300px; margin:0 auto;
  padding:40px 60px; box-sizing:border-box;
  gap:64px;
}
.nl-split-rev { flex-direction:row-reverse; }

/* Info panel */
.nl-info {
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:26px;
  animation:nlInfoIn .75s cubic-bezier(.22,.68,0,1.1) .25s both;
}
@keyframes nlInfoIn { from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;} }
.nl-info-brand { display:flex; align-items:center; gap:12px; text-decoration:none; cursor:pointer; transition:opacity .18s; }
.nl-info-brand:hover { opacity:.82; }
.nl-info-logo-box {
  width:46px; height:46px; border-radius:13px;
  background:linear-gradient(135deg,var(--nl-c3,#7c3aed),var(--nl-c1,#8b5cf6),var(--nl-c2,#c084fc));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.3rem; font-weight:900;
  box-shadow:0 4px 18px rgba(139,92,246,.45); flex-shrink:0;
}
.nl-info-brand-name { font-size:1.45rem; font-weight:800; color:#fff; letter-spacing:.02em; }
.nl-info-tagline h2 {
  font-size:2.2rem; font-weight:800; color:#fff;
  line-height:1.18; margin:0 0 10px; letter-spacing:-.01em;
}
.nl-info-tagline p { font-size:.95rem; color:rgba(255,255,255,.5); margin:0; line-height:1.65; }

/* Feature cards */
.nl-features { display:flex; flex-direction:column; gap:10px; }
.nl-feat {
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(120deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.05) 100%);
  border:1px solid rgba(255,255,255,.13);
  border-left:3px solid var(--nl-c1,#8b5cf6);
  border-radius:14px; padding:13px 16px;
  backdrop-filter:blur(12px);
  transition:background .2s,border-left-color .2s,transform .25s,box-shadow .25s;
  position:relative; overflow:hidden;
}
.nl-feat:hover {
  background:linear-gradient(120deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.08) 100%);
  border-left-color:var(--nl-c2,#c084fc);
  transform:translateX(6px);
  box-shadow:0 6px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
.nl-feat-icon {
  width:42px; height:42px; border-radius:12px; flex-shrink:0; position:relative; z-index:1;
  background:linear-gradient(135deg,color-mix(in srgb,var(--nl-c1,#8b5cf6) 42%,transparent),color-mix(in srgb,var(--nl-c2,#c084fc) 26%,transparent));
  border:1px solid color-mix(in srgb,var(--nl-c2,#c084fc) 52%,transparent);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
  box-shadow:0 2px 12px color-mix(in srgb,var(--nl-c1,#8b5cf6) 28%,transparent);
}
.nl-feat-icon i { color:var(--nl-c2,#c084fc); filter:drop-shadow(0 0 5px color-mix(in srgb,var(--nl-c2,#c084fc) 70%,transparent)); }
.nl-feat-title { font-size:.88rem; font-weight:700; color:#fff; margin-bottom:3px; letter-spacing:.01em; position:relative; z-index:1; }
.nl-feat-desc { font-size:.74rem; color:rgba(255,255,255,.52); line-height:1.4; position:relative; z-index:1; }

/* Stats row */
.nl-stats {
  display:flex; align-items:center;
  background:linear-gradient(120deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.04) 100%);
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px; padding:14px 20px;
  backdrop-filter:blur(10px);
}
.nl-stat { flex:1; text-align:center; display:flex; flex-direction:column; gap:3px; }
.nl-stat-num { font-size:1.35rem; font-weight:800; color:var(--nl-c2,#c084fc); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--nl-c2,#c084fc) 55%,transparent)); }
.nl-stat-lbl { font-size:.67rem; color:rgba(255,255,255,.42); text-transform:uppercase; letter-spacing:.06em; }
.nl-stat-div { width:1px; height:32px; background:rgba(255,255,255,.15); }

/* Slide cycling */
.nl-slides { position:relative; }
.nl-slide { display:none; animation:nlSlideIn .5s cubic-bezier(.22,.68,0,1.1) both; }
.nl-slide.active { display:flex; flex-direction:column; gap:16px; }
@keyframes nlSlideIn { from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;} }
/* Dot indicators */
.nl-dots { display:flex; gap:7px; padding-top:4px; }
.nl-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22); cursor:pointer; transition:background .25s,transform .25s,width .25s; }
.nl-dot.active { background:var(--nl-c2,#c084fc); width:22px; border-radius:4px; }

.nl-wrap  { position:relative; display:flex; flex-direction:column; align-items:center; animation:nlSlide .65s cubic-bezier(.22,.68,0,1.2) both; }
@keyframes nlSlide { from{transform:translateX(70px);opacity:0;} to{transform:none;opacity:1;} }
.nl-border-ring { position:relative; border-radius:22px; padding:2px; overflow:hidden; width:420px; }

@media(max-width:960px){
  .nl-split,.nl-split-rev{ flex-direction:column!important; padding:20px 16px; gap:20px; overflow-y:auto; justify-content:center; }
  .nl-info-tagline h2{ font-size:1.5rem; }
  .nl-features,.nl-stats{ display:none; }
  .nl-info{ gap:14px; }
}
/* Corner-only rotating glow — 4 short bright spots, transparent in between */
.nl-border-ring::before {
  content:""; position:absolute; inset:-80%;
  background:conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 10%, var(--nl-c2,#c084fc) 12.5%, var(--nl-c1,#8b5cf6) 14%, transparent 16%,
    transparent 35%, var(--nl-c2,#c084fc) 37%, var(--nl-c1,#8b5cf6) 38.5%, transparent 40%,
    transparent 60%, var(--nl-c2,#c084fc) 62%, var(--nl-c1,#8b5cf6) 63.5%, transparent 65%,
    transparent 85%, var(--nl-c2,#c084fc) 87%, var(--nl-c1,#8b5cf6) 88.5%, transparent 90%,
    transparent 100%
  );
  animation:nlRingSpin 5s linear infinite; z-index:0;
}
@keyframes nlRingSpin { to{transform:rotate(360deg);} }
.nl-card { position:relative; z-index:1; background:rgba(12,22,60,.92); backdrop-filter:blur(26px) saturate(1.5); -webkit-backdrop-filter:blur(26px) saturate(1.5); border-radius:20px; padding:34px 34px 24px; box-shadow:0 24px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.13); }
.nl-title { font-size:1.5rem; font-weight:800; letter-spacing:.22em; color:#fff; text-align:center; margin:0 0 24px; text-shadow:0 2px 18px var(--nl-c1,#8b5cf6); }
.nl-field { position:relative; margin-bottom:12px; }
.nl-field input { display:block !important; width:100% !important; box-sizing:border-box !important; padding:13px 44px 13px 16px !important; background:rgba(255,255,255,.13) !important; border:1.5px solid rgba(255,255,255,.22) !important; border-radius:11px !important; color:#fff !important; font-size:.93rem !important; font-family:inherit !important; outline:none !important; transition:border-color .2s, background .2s, box-shadow .2s; }
.nl-field input::placeholder { color:rgba(255,255,255,.45) !important; }
.nl-field input:focus { border-color:var(--nl-c2,#c084fc) !important; background:rgba(255,255,255,.18) !important; box-shadow:0 0 0 3px rgba(139,92,246,.2) !important; }
/* Block global theme override on auth pages */
body.nl-body input, body.nl-body textarea, body.nl-body select {
  background:rgba(255,255,255,.13) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.22) !important;
}
.nl-eye { position:absolute; right:12px; top:40%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:rgba(255,255,255,.38); font-size:.88rem; padding:4px; transition:color .15s; }
.nl-eye:hover { color:rgba(255,255,255,.85); }
.nl-btn { display:block; width:100%; padding:13px; background:linear-gradient(135deg,var(--nl-c3,#7c3aed),var(--nl-c1,#8b5cf6),var(--nl-c2,#c084fc)); border:none; border-radius:11px; cursor:pointer; font-size:.97rem; font-weight:700; letter-spacing:.04em; color:#fff; font-family:inherit; box-shadow:0 4px 20px rgba(139,92,246,.5); transition:transform .15s, box-shadow .15s, filter .15s; position:relative; overflow:hidden; margin-top:2px; }
.nl-btn::before { content:""; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(255,255,255,.15),transparent); pointer-events:none; }
.nl-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(139,92,246,.6); filter:brightness(1.07); }
.nl-btn:active { transform:none; } .nl-btn:disabled { opacity:.7; cursor:not-allowed; transform:none; filter:none; }
.nl-divider { border:none; border-top:1px solid rgba(255,255,255,.1); margin:16px 0 12px; }
.nl-signup { margin:0 0 9px; text-align:center; font-size:.87rem; color:rgba(255,255,255,.52); }
.nl-signup-link { color:var(--nl-c2,#c084fc); text-decoration:none; font-weight:700; }
.nl-signup-link:hover { color:#fff; }
.nl-legal { display:flex; gap:8px; justify-content:center; align-items:center; margin:0; flex-wrap:wrap; }
.nl-legal a { font-size:.7rem; color:rgba(255,255,255,.25); text-decoration:none; }
.nl-legal a:hover { color:rgba(255,255,255,.6); }
.nl-legal span { color:rgba(255,255,255,.15); font-size:.65rem; }
@keyframes nlLoading { to{transform:rotate(360deg);} }

/* ═══════════════════════════════
   Vehicle / character animations
   ═══════════════════════════════ */
.nl-vehicles { position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.nl-veh { position:absolute; }

/* Airplane — left → right, upper sky */
.nl-veh-plane {
  top:7%; left:0;
  animation: nlVPlane 28s 1s linear infinite;
  filter:drop-shadow(0 0 10px rgba(140,200,255,.6));
}
@keyframes nlVPlane {
  0%   { transform:translateX(-170px) translateY(0); }
  62%  { transform:translateX(calc(100vw + 200px)) translateY(-65px); }
  100% { transform:translateX(calc(100vw + 200px)) translateY(-65px); }
}

/* Car — right → left, ground */
.nl-veh-car {
  bottom:3%; right:0;
  animation: nlVCar 38s 13s linear infinite;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
@keyframes nlVCar {
  0%   { transform:translateX(150px); }
  44%  { transform:translateX(calc(-100vw - 160px)); }
  100% { transform:translateX(calc(-100vw - 160px)); }
}

/* Bicycle girl — left → right, ground */
.nl-veh-bike {
  bottom:2.5%; left:0;
  animation: nlVBike 55s 27s linear infinite;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.38));
}
@keyframes nlVBike {
  0%   { transform:translateX(-130px); }
  48%  { transform:translateX(calc(100vw + 150px)); }
  100% { transform:translateX(calc(100vw + 150px)); }
}

.night-scene {
    position:fixed; inset:0; overflow:hidden;
}

.night-stars {
    position:absolute; inset:0; pointer-events:none;
}

.night-auth-wrap {
    position:fixed; inset:0; z-index:20;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:0;
}

/* ── Slide animations ── */
@keyframes slideInRight {
    from { transform:translateX(90px); opacity:0; }
    to   { transform:translateX(0);    opacity:1; }
}
@keyframes slideInLeft {
    from { transform:translateX(-90px); opacity:0; }
    to   { transform:translateX(0);     opacity:1; }
}

/* ── Glowing border wrapper ── */
.night-card-wrap {
    position:relative;
    border-radius:20px;
    padding:2.5px;
    overflow:hidden;
    width:100%; max-width:420px;
    animation:slideInRight .65s cubic-bezier(.22,.68,0,1.2) both;
}
/* Register page — slide from left */
.night-card-wrap.slide-left {
    animation:slideInLeft .65s cubic-bezier(.22,.68,0,1.2) both;
}

/* Rotating conic gradient border */
.night-card-wrap::before {
    content:'';
    position:absolute;
    inset:-70%;
    background:conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 38%,
        var(--border-c1, #00e5ff) 48%,
        var(--border-c2, #0080ff) 54%,
        transparent 64%,
        transparent 100%
    );
    animation:border-spin 4s linear infinite;
    z-index:0;
}
@keyframes border-spin {
    to { transform:rotate(360deg); }
}

/* ── Glass card (cleaner, lighter glass) ── */
.night-card {
    position:relative; z-index:1;
    background:var(--card-bg, rgba(20,50,100,.55));
    backdrop-filter:blur(32px) saturate(1.8) brightness(1.18);
    -webkit-backdrop-filter:blur(32px) saturate(1.8) brightness(1.18);
    border-radius:18px;
    padding:40px 42px 34px;
    width:100%; box-sizing:border-box;
    border:1px solid rgba(255,255,255,.14);
}

.night-card-title {
    font-size:1.6rem; font-weight:800;
    letter-spacing:.2em; text-transform:uppercase;
    color:#fff;
    text-align:center;
    margin:0 0 28px;
    text-shadow:0 0 30px var(--border-c1, #00e5ff);
}

/* ── Fields ── */
.nc-field {
    position:relative;
    margin-bottom:13px;
}
.nc-field input {
    width:100%; box-sizing:border-box;
    padding:13px 42px 13px 16px;
    background:rgba(255,255,255,.12);
    border:1.5px solid rgba(255,255,255,.2);
    border-radius:10px;
    color:#fff;
    font-size:.95rem;
    font-family:inherit;
    outline:none;
    transition:border-color .2s, background .2s, box-shadow .2s;
}
.nc-field input::placeholder { color:rgba(255,255,255,.4); }
.nc-field input:focus {
    border-color:var(--border-c1, #00e5ff);
    background:rgba(255,255,255,.18);
    box-shadow:0 0 0 3px var(--focus-glow, rgba(0,229,255,.18));
}

.nc-eye {
    position:absolute; right:12px; top:50%;
    transform:translateY(-50%);
    background:none; border:none; cursor:pointer;
    color:rgba(255,255,255,.45); font-size:.88rem; padding:4px;
    line-height:1; transition:color .15s;
}
.nc-eye:hover { color:rgba(255,255,255,.9); }

/* ── Remember + forgot row ── */
.nc-options-row {
    display:flex; align-items:center;
    justify-content:space-between;
    margin:4px 0 18px;
    font-size:.83rem;
}
.nc-remember {
    display:flex; align-items:center; gap:7px;
    cursor:pointer; color:rgba(255,255,255,.6);
    user-select:none;
}
.nc-remember input[type=checkbox] { display:none; }
.nc-check-box {
    width:16px; height:16px; border-radius:4px;
    border:1.5px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:background .15s, border-color .15s;
}
.nc-remember input:checked ~ .nc-check-box {
    background:var(--border-c1, #00e5ff);
    border-color:var(--border-c1, #00e5ff);
}
.nc-check-box i { color:#000; font-size:.55rem; }
.nc-forgot {
    color:rgba(255,255,255,.6); text-decoration:none; font-size:.83rem;
}
.nc-forgot:hover { color:#fff; }

/* ── Submit button ── */
.nc-btn {
    width:100%; padding:14px;
    border:none; border-radius:10px; cursor:pointer;
    font-size:1rem; font-weight:700; letter-spacing:.04em;
    color:#fff; font-family:inherit;
    background:var(--btn-bg, linear-gradient(135deg,#0080ff 0%,#00c8ff 100%));
    box-shadow:0 4px 20px var(--btn-shadow, rgba(0,160,255,.45));
    transition:transform .15s, box-shadow .15s, opacity .15s;
    position:relative; overflow:hidden;
    margin-top:2px;
}
.nc-btn::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(255,255,255,.15), transparent);
    pointer-events:none;
}
.nc-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px var(--btn-shadow, rgba(0,160,255,.55)); }
.nc-btn:active { transform:none; }
.nc-btn:disabled { opacity:.7; cursor:not-allowed; transform:none; }

/* ── Signup / footer link ── */
.nc-signup-row {
    display:flex; justify-content:flex-end;
    margin-top:14px; font-size:.85rem;
}
.nc-signup-row a {
    color:rgba(255,255,255,.75); text-decoration:underline;
}
.nc-signup-row a:hover { color:#fff; }

.nc-foot {
    text-align:center; margin-top:18px;
    font-size:.87rem; color:rgba(255,255,255,.55);
}
.nc-foot a { color:#FFD600; text-decoration:underline; }
.nc-foot a:hover { color:#FFE44D; }

/* ── Register grid for name fields ── */
.nc-grid-2 {
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
}

/* ── Errors / pw strength ── */
.nc-field .field-error { font-size:.74rem; color:#f87171; margin-top:4px; min-height:14px; }
.pw-strength { margin-top:5px; }
.pw-bar { height:3px; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden; margin-bottom:3px; }
.strength-fill { height:100%; width:0; border-radius:99px; transition:width .3s,background .3s; }
.strength-text { font-size:.7rem; color:rgba(255,255,255,.35); }
.pw-checklist { margin:4px 0 0; padding:0; list-style:none; font-size:.7rem; color:rgba(255,255,255,.3); display:flex; flex-wrap:wrap; gap:3px 10px; }
.pw-checklist li::before { content:"✓ "; }
.pw-checklist li.met { color:#4ade80; }

/* Lockout */
#lockoutInline{display:none;margin-top:10px;padding:13px 15px;border-radius:10px;background:rgba(239,68,68,.1);border:1.5px solid rgba(239,68,68,.3);animation:lockSlideIn .25s ease;}
@keyframes lockSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#lockoutInline .li-row{display:flex;align-items:center;gap:10px;}
#lockoutInline .li-icon{width:30px;height:30px;border-radius:50%;background:rgba(239,68,68,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#lockoutInline .li-icon i{color:#f87171;font-size:.8rem;}
#lockoutInline .li-label{font-size:.73rem;color:#f87171;font-weight:600;}
#lockoutInline .li-timer{font-size:1.45rem;font-weight:800;color:#f87171;font-variant-numeric:tabular-nums;text-align:center;margin:6px 0 5px;}
#lockoutInline .li-bar-wrap{height:3px;background:rgba(239,68,68,.15);border-radius:99px;overflow:hidden;}
#lockoutInline .li-bar{height:100%;background:linear-gradient(90deg,#f87171,#dc2626);border-radius:99px;transition:width 1s linear;}
#lockoutInline.unlocked{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.28);}
#lockoutInline.unlocked .li-icon i,#lockoutInline.unlocked .li-label,#lockoutInline.unlocked .li-timer{color:#4ade80;}

/* ── Below-card links inside card ── */
.nl-below-link {
    margin:16px 0 6px; text-align:center; font-size:.88rem;
    color:rgba(255,255,255,.6);
}
.nl-below-link a { color:rgba(255,255,255,.8); text-decoration:underline; font-weight:500; }
.nl-below-link a:hover { color:#fff; }
.nl-legal {
    display:flex; gap:16px; justify-content:center;
    margin:0; flex-wrap:wrap; padding:0; list-style:none;
}
.nl-legal a { font-size:.72rem; color:rgba(255,255,255,.32); text-decoration:none; }
.nl-legal a:hover { color:rgba(255,255,255,.65); }

/* Responsive */
@media(max-width:500px){
    .night-card { padding:26px 18px 22px; }
    .night-card-title { font-size:1.3rem; }
    .night-auth-wrap { padding:0 12px; }
    .nc-grid-2 { grid-template-columns:1fr; }
}

@keyframes nc-spin { to { transform:rotate(360deg); } }

/* ══ Shake animation ══ */
@keyframes nlShake {
  0%,100%{transform:translateX(0);}
  15%{transform:translateX(-9px);}
  30%{transform:translateX(9px);}
  45%{transform:translateX(-6px);}
  60%{transform:translateX(6px);}
  75%{transform:translateX(-3px);}
  90%{transform:translateX(3px);}
}
.nl-shake { animation:nlShake .44s cubic-bezier(.36,.07,.19,.97) both; }

/* ══ Field error state ══ */
.nl-field.nl-err input { border-color:#f87171 !important; box-shadow:0 0 0 3px rgba(248,113,113,.2) !important; }
.nl-field-err { font-size:.72rem; color:#f87171; margin-top:4px; display:block; overflow:hidden; max-height:0; opacity:0; transition:max-height .2s,opacity .2s; }
.nl-field.nl-err .nl-field-err { max-height:30px; opacity:1; }

/* ══ Social login buttons ══ */
.nl-social { display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.nl-social-btn {
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:11px 16px; border-radius:11px;
  border:1.5px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.09);
  color:#fff; font-size:.88rem; font-weight:600; font-family:inherit;
  cursor:pointer; text-decoration:none;
  transition:background .2s,border-color .2s,transform .15s,box-shadow .15s;
}
.nl-social-btn::before { content:""; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(255,255,255,.07),transparent); pointer-events:none; }
.nl-social-btn:hover:not(:disabled) { background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.32); transform:translateY(-1px); box-shadow:0 4px 18px rgba(0,0,0,.18); }
.nl-social-btn:active:not(:disabled) { transform:none; }
.nl-social-btn:disabled,.nl-social-btn.nl-disabled { opacity:.62; cursor:not-allowed; pointer-events:none; }
.nl-social-svg { flex-shrink:0; display:flex; }
.nl-badge {
  position:absolute; top:5px; right:8px;
  font-size:.58rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  background:rgba(255,255,255,.16); color:rgba(255,255,255,.7);
  padding:2px 7px; border-radius:99px;
}
.nl-or { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.3); font-size:.74rem; margin-bottom:12px; }
.nl-or::before,.nl-or::after { content:""; flex:1; height:1px; background:rgba(255,255,255,.1); }

/* ── Math captcha ── */
.nl-math-cap {
  display:flex; align-items:center; gap:12px;
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:12px; padding:10px 14px;
  background:rgba(255,255,255,.06); margin-bottom:14px;
  transition:border-color .2s, background .2s;
}
.nl-math-cap.nl-cap-ok  { border-color:rgba(74,222,128,.45) !important; background:rgba(74,222,128,.05) !important; }
.nl-math-cap.nl-err-cap { border-color:rgba(248,113,113,.55) !important; animation:nlShake .4s both; }
.nl-math-inner { flex:1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nl-math-label { font-size:.78rem; color:rgba(255,255,255,.45); white-space:nowrap; }
.nl-math-nums  { font-size:.92rem; font-weight:700; color:var(--nl-c2,#60a5fa); letter-spacing:.03em; white-space:nowrap; }
.nl-math-eq    { font-size:.82rem; color:rgba(255,255,255,.35); }
.nl-math-input {
  width:56px; padding:6px 8px;
  border:1.5px solid rgba(255,255,255,.18); border-radius:8px;
  background:rgba(255,255,255,.07); color:#fff;
  font-size:.88rem; font-weight:600; text-align:center;
  outline:none; font-family:inherit;
  transition:border-color .2s, box-shadow .2s;
}
.nl-math-input:focus { border-color:rgba(255,255,255,.4); box-shadow:0 0 0 3px rgba(255,255,255,.08); }
.nl-math-input.nl-cap-ok { border-color:rgba(74,222,128,.6) !important; color:#4ade80; }
.nl-math-shield { display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0; }
.nl-math-shield i { font-size:.82rem; color:rgba(255,255,255,.25); }
.nl-math-shield span { font-size:.46rem; color:rgba(255,255,255,.18); letter-spacing:.07em; text-transform:uppercase; }

/* ══ Captcha (old click-type, kept for reference) ══ */
.nl-captcha {
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.14);
  border-radius:11px; padding:11px 15px; margin-bottom:12px;
  cursor:pointer; user-select:none;
  transition:border-color .2s,background .2s;
}
.nl-captcha:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); }
.nl-captcha.nl-cap-ok  { border-color:rgba(74,222,128,.48) !important; background:rgba(74,222,128,.06) !important; cursor:default; }
.nl-captcha.nl-err-cap { border-color:rgba(248,113,113,.55) !important; animation:nlShake .4s both; }
.nl-cap-box {
  width:22px; height:22px; border-radius:5px; flex-shrink:0;
  border:2px solid rgba(255,255,255,.28); background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center;
  transition:all .25s;
}
.nl-captcha.nl-cap-ok .nl-cap-box { background:#4ade80; border-color:#4ade80; }
.nl-cap-tick { font-size:.65rem; color:#000; display:none; }
.nl-captcha.nl-cap-ok .nl-cap-tick { display:block; }
.nl-cap-spin { width:14px; height:14px; border:2px solid rgba(255,255,255,.22); border-top-color:#fff; border-radius:50%; animation:nlLoading .6s linear infinite; display:none; }
.nl-captcha.nl-cap-loading .nl-cap-spin { display:block; }
.nl-captcha.nl-cap-loading .nl-cap-box { display:none; }
.nl-cap-txt { font-size:.82rem; color:rgba(255,255,255,.62); flex:1; }
.nl-captcha.nl-cap-ok .nl-cap-txt { color:rgba(255,255,255,.88); }
.nl-cap-logo { display:flex; flex-direction:column; align-items:center; gap:2px; }
.nl-cap-logo-icon { font-size:.82rem; color:rgba(255,255,255,.28); }
.nl-cap-logo-txt  { font-size:.5rem; color:rgba(255,255,255,.2); letter-spacing:.06em; text-transform:uppercase; }

/* ══ Mobile improvements ══ */
@media(max-width:960px){
  .nl-btn { padding:15px !important; font-size:1rem !important; min-height:50px; }
  .nl-field input { padding:14px 46px 14px 16px !important; font-size:1rem !important; }
  .nl-social-btn { padding:13px 16px; font-size:.93rem; min-height:48px; }
  .nl-card { padding:28px 20px 22px !important; }
  #nlModeToggle { bottom:14px; padding:8px 14px; font-size:.78rem; }
}
@media(max-width:480px){
  .nl-card { padding:22px 14px 18px !important; border-radius:16px !important; }
  .nl-border-ring { border-radius:18px !important; }
  .nl-title { font-size:1.25rem !important; margin-bottom:16px !important; }
  .nl-options { flex-direction:column; align-items:flex-start; gap:10px; }
  .nl-social { gap:8px; margin-bottom:12px; }
  .nl-info-tagline h2 { font-size:1.7rem; }
  #nlModeToggle { font-size:.74rem; padding:7px 12px; bottom:10px; }
}

/* ══════════════════════════════════════
   DAY MODE  (html.nl-mode-day)
   White / glass — BG elements hidden
   ══════════════════════════════════════ */
html.nl-mode-day body.nl-body {
  background: #eef2fa !important;
  overflow: auto !important; height: auto !important; min-height: 100vh !important;
}
html.nl-mode-day .nl-page {
  position: relative !important; inset: auto !important;
  overflow: visible !important; min-height: 100vh !important;
  background: transparent !important;
}
html.nl-mode-day .nl-bg,
html.nl-mode-day .nl-aurora,
html.nl-mode-day .nl-stars,
html.nl-mode-day .nl-svg,
html.nl-mode-day .nl-vehicles { display: none !important; }
html.nl-mode-day .nl-border-ring::before { opacity: 0 !important; }
html.nl-mode-day .nl-split { min-height: 100vh; }

/* Card — frosted glass */
html.nl-mode-day .nl-card {
  background: rgba(255,255,255,.62) !important;
  backdrop-filter: blur(30px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.7) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.1), inset 0 0 0 1px rgba(255,255,255,.85) !important;
}
/* Inputs */
html.nl-mode-day body.nl-body .nl-field input,
html.nl-mode-day body.nl-body .nl-card input {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(180,200,230,.65) !important;
  color: #1e293b !important;
}
html.nl-mode-day body.nl-body .nl-field input::placeholder { color: #94a3b8 !important; }
html.nl-mode-day body.nl-body .nl-field input:focus {
  background: rgba(255,255,255,.95) !important;
  border-color: var(--nl-c1,#2563eb) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--nl-c1,#2563eb) 15%,transparent) !important;
  color: #1e293b !important;
}
/* Eye button */
html.nl-mode-day body.nl-body .nl-eye { color: #64748b !important; }
html.nl-mode-day body.nl-body .nl-eye:hover { color: #1e293b !important; }
/* Text */
html.nl-mode-day .nl-title { color: #1e293b !important; text-shadow: none !important; }
html.nl-mode-day .nl-info-brand-name { color: #1e293b !important; }
html.nl-mode-day .nl-info-tagline h2 { color: #1e293b !important; }
html.nl-mode-day .nl-info-tagline p { color: #475569 !important; }
/* Feature cards */
html.nl-mode-day .nl-feat {
  background: rgba(255,255,255,.52) !important;
  border-color: rgba(200,215,235,.7) !important;
  backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
}
html.nl-mode-day .nl-feat:hover { background: rgba(255,255,255,.82) !important; box-shadow: 0 4px 18px rgba(0,0,0,.1) !important; }
html.nl-mode-day .nl-feat-title { color: #1e293b !important; }
html.nl-mode-day .nl-feat-desc  { color: #475569 !important; }
/* Stats */
html.nl-mode-day .nl-stats {
  background: rgba(255,255,255,.52) !important;
  border-color: rgba(200,215,235,.7) !important;
  backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
}
html.nl-mode-day .nl-stat-lbl { color: #475569 !important; }
/* Misc */
html.nl-mode-day .nl-divider { border-color: rgba(0,0,0,.09) !important; }
html.nl-mode-day .nl-signup  { color: #475569 !important; }
html.nl-mode-day .nl-signup-link { color: var(--nl-c1,#2563eb) !important; }
html.nl-mode-day .nl-legal a { color: #94a3b8 !important; }
html.nl-mode-day body.nl-body .nl-link { color: #475569 !important; }
html.nl-mode-day .nl-cb-label { color: #475569 !important; }
html.nl-mode-day .nl-dot { background: rgba(0,0,0,.18) !important; }
html.nl-mode-day .nl-dot.active { background: var(--nl-c1,#2563eb) !important; }
html.nl-mode-day .nl-feat-icon i { filter: drop-shadow(0 0 4px color-mix(in srgb,var(--nl-c2,#c084fc) 50%,transparent)); }

/* ══ Toggle button ══ */
#nlModeToggle {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; align-items: center; gap: 8px;
  padding: 9px 20px; border-radius: 99px;
  border: 1.5px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #fff; font-size: .82rem; font-weight: 600;
  cursor: pointer; font-family: inherit; letter-spacing: .02em;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(0,0,0,.22);
  white-space: nowrap;
}
#nlModeToggle:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.5); box-shadow: 0 6px 28px rgba(0,0,0,.3); }
html.nl-mode-day #nlModeToggle {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(200,215,235,.8) !important;
  color: #1e293b !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.1) !important;
}
html.nl-mode-day #nlModeToggle:hover { background: rgba(255,255,255,.92) !important; }

/* Day mode — social + captcha + checkbox */
html.nl-mode-day .nl-social-btn { background:rgba(255,255,255,.65) !important; border-color:rgba(180,205,235,.7) !important; color:#1e293b !important; }
html.nl-mode-day .nl-social-btn:hover:not(:disabled) { background:rgba(255,255,255,.9) !important; border-color:rgba(140,180,225,.9) !important; box-shadow:0 4px 16px rgba(0,0,0,.09) !important; }
html.nl-mode-day .nl-badge { background:rgba(0,0,0,.07) !important; color:#64748b !important; }
html.nl-mode-day .nl-or { color:#94a3b8 !important; }
html.nl-mode-day .nl-or::before, html.nl-mode-day .nl-or::after { background:rgba(0,0,0,.08) !important; }
/* old click-captcha day overrides */
html.nl-mode-day .nl-captcha { background:rgba(255,255,255,.55) !important; border-color:rgba(180,205,235,.65) !important; }
html.nl-mode-day .nl-captcha:hover { background:rgba(255,255,255,.82) !important; }
html.nl-mode-day .nl-cap-txt { color:#475569 !important; }
html.nl-mode-day .nl-cap-box { border-color:rgba(0,0,0,.2) !important; background:rgba(255,255,255,.7) !important; }
html.nl-mode-day .nl-cap-logo-icon { color:rgba(0,0,0,.22) !important; }
html.nl-mode-day .nl-cap-logo-txt  { color:rgba(0,0,0,.18) !important; }
html.nl-mode-day .nl-field.nl-err input { border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.14) !important; }
html.nl-mode-day .nl-field-err { color:#dc2626 !important; }
/* Remember-me checkbox fix in day mode */
html.nl-mode-day .nl-cb-label { color:#475569 !important; }
html.nl-mode-day .nl-cb-box { border-color:rgba(0,0,0,.22) !important; background:rgba(255,255,255,.8) !important; }
html.nl-mode-day .nl-cb:checked ~ .nl-cb-box { background:var(--nl-c1) !important; border-color:var(--nl-c2) !important; }
html.nl-mode-day .nl-cb:checked ~ .nl-cb-box i { display:block; }
html.nl-mode-day .nl-link { color:#64748b !important; }
html.nl-mode-day .nl-link:hover { color:var(--nl-c1) !important; }
/* Math captcha day overrides */
html.nl-mode-day .nl-math-cap { background:rgba(255,255,255,.6) !important; border-color:rgba(180,205,235,.7) !important; }
html.nl-mode-day .nl-math-cap.nl-cap-ok { background:rgba(220,252,231,.7) !important; border-color:rgba(74,222,128,.5) !important; }
html.nl-mode-day .nl-math-cap.nl-err-cap { border-color:rgba(239,68,68,.6) !important; }
html.nl-mode-day .nl-math-label { color:#374151 !important; }
html.nl-mode-day .nl-math-nums { color:#1d4ed8 !important; }
html.nl-mode-day .nl-math-input { background:rgba(255,255,255,.9) !important; border-color:rgba(180,205,235,.8) !important; color:#111827 !important; }
html.nl-mode-day .nl-math-input:focus { border-color:var(--nl-c1) !important; box-shadow:0 0 0 3px rgba(37,99,235,.12) !important; }
html.nl-mode-day .nl-math-input.nl-cap-ok { border-color:#16a34a !important; background:rgba(240,255,244,.95) !important; color:#15803d !important; }
html.nl-mode-day .nl-math-shield { color:rgba(0,0,0,.18) !important; }
html.nl-mode-day .nl-math-shield span { color:rgba(0,0,0,.15) !important; }

/* ══════════════════════════════════════════════════════════════════
   NIGHT MODE — explicit reinforcement
   base.php auto-sets [data-theme="dark"] at night, which causes
   style.css to set body { background: #1e2a3d } (grey-blue). That
   grey body colour bleeds into the .nl-card backdrop-filter and
   makes the card look washed-out / grey instead of deep navy.
   Fix: force the body to pure dark + lock the card colour.
   ══════════════════════════════════════════════════════════════════ */
html.nl-mode-night body.nl-body {
  background: #06101e !important;
  overflow: hidden !important;
  height: 100vh !important;
}
html.nl-mode-night .nl-page { background: transparent !important; }

/* Card — solid deep navy so backdrop-filter sees dark, not grey */
html.nl-mode-night .nl-card {
  background: rgba(8, 15, 48, 0.96) !important;
  backdrop-filter: blur(26px) saturate(1.6) brightness(.88) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.6) brightness(.88) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.13) !important;
}

/* Ensure gradient background layers are always visible */
html.nl-mode-night .nl-bg,
html.nl-mode-night .nl-aurora,
html.nl-mode-night .nl-stars,
html.nl-mode-night .nl-svg,
html.nl-mode-night .nl-vehicles { display: block !important; }
html.nl-mode-night .nl-bg-1 { opacity: 1 !important; }

/* Night inputs — block style.css dark-mode override (#28364e surface) */
html.nl-mode-night body.nl-body input,
html.nl-mode-night body.nl-body textarea,
html.nl-mode-night body.nl-body select {
  background: rgba(255,255,255,.13) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.22) !important;
}
html.nl-mode-night .nl-field input {
  background: rgba(255,255,255,.13) !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
}
html.nl-mode-night .nl-field input::placeholder { color: rgba(255,255,255,.45) !important; }
html.nl-mode-night .nl-field input:focus {
  background: rgba(255,255,255,.19) !important;
  border-color: var(--nl-c2, #c084fc) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.22) !important;
}

/* Math captcha night */
html.nl-mode-night .nl-math-cap {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.15) !important;
}
html.nl-mode-night .nl-math-input {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

/* Text colours in night mode (fight any light-theme overrides) */
html.nl-mode-night .nl-title  { color: #fff !important; }
html.nl-mode-night .nl-signup { color: rgba(255,255,255,.52) !important; }
html.nl-mode-night .nl-signup-link { color: var(--nl-c2, #c084fc) !important; }
html.nl-mode-night .nl-legal a { color: rgba(255,255,255,.25) !important; }
html.nl-mode-night .nl-divider { border-color: rgba(255,255,255,.1) !important; }
html.nl-mode-night .nl-link { color: rgba(255,255,255,.4) !important; }
html.nl-mode-night .nl-cb-label { color: rgba(255,255,255,.55) !important; }
html.nl-mode-night .nl-cb-box {
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.06) !important;
}

/* Border ring glow — keep it visible in night mode */
html.nl-mode-night .nl-border-ring::before { opacity: 1 !important; }