/* The base stylesheet styles every input; the !important marks below keep these fields glassy. */
/* NYX Project — sign-in page, Apple-style.
   A slowly drifting wallpaper under frosted glass; a lock-screen header (date and time over a large
   NYX wordmark); one glass card with pill fields and a blue pill button. Motion uses Apple-like
   easing: things settle rather than bounce, and everything stops with "reduce motion". */
:root{
  --nx-ink:#1D1D1F;--nx-soft:#6E6E73;--nx-faint:#8E8E93;--nx-blue:#0071E3;--nx-blue-hover:#0077ED;--nx-red:#D70015;
  --nx-ground:#EDF1FA;--nx-b1:#7FA6FF;--nx-b2:#B9A8FF;--nx-b3:#79D9EE;--nx-b4:#FFC2D6;
  --nx-glass:rgba(255,255,255,.58);--nx-glass-edge:rgba(255,255,255,.75);--nx-glass-line:rgba(29,29,31,.08);
  --nx-field:rgba(255,255,255,.72);--nx-field-line:rgba(29,29,31,.12);--nx-chip:rgba(255,255,255,.5);
  --nx-shadow:0 30px 60px -28px rgba(30,45,90,.45),0 12px 24px -16px rgba(30,45,90,.25);
  --nx-ease:cubic-bezier(.32,.72,0,1);--nx-settle:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --nx-ink:#F5F5F7;--nx-soft:#A1A1A6;--nx-faint:#86868B;--nx-blue:#0A84FF;--nx-blue-hover:#3395FF;--nx-red:#FF6961;
  --nx-ground:#05070F;--nx-b1:#1D4ED8;--nx-b2:#5B21B6;--nx-b3:#0E7490;--nx-b4:#9D174D;
  --nx-glass:rgba(22,26,42,.56);--nx-glass-edge:rgba(255,255,255,.14);--nx-glass-line:rgba(255,255,255,.08);
  --nx-field:rgba(255,255,255,.07);--nx-field-line:rgba(255,255,255,.14);--nx-chip:rgba(255,255,255,.06);
  --nx-shadow:0 30px 70px -28px rgba(0,0,0,.8),0 12px 24px -16px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --nx-ink:#F5F5F7;--nx-soft:#A1A1A6;--nx-faint:#86868B;--nx-blue:#0A84FF;--nx-blue-hover:#3395FF;--nx-red:#FF6961;
  --nx-ground:#05070F;--nx-b1:#1D4ED8;--nx-b2:#5B21B6;--nx-b3:#0E7490;--nx-b4:#9D174D;
  --nx-glass:rgba(22,26,42,.56);--nx-glass-edge:rgba(255,255,255,.14);--nx-glass-line:rgba(255,255,255,.08);
  --nx-field:rgba(255,255,255,.07);--nx-field-line:rgba(255,255,255,.14);--nx-chip:rgba(255,255,255,.06);
  --nx-shadow:0 30px 70px -28px rgba(0,0,0,.8),0 12px 24px -16px rgba(0,0,0,.6);
}

body.nx{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--nx-ground);color:var(--nx-ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",'Inter',"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.nx-theming,.nx-theming *{transition:background-color .5s ease,color .5s ease,border-color .5s ease!important}

/* ---- Wallpaper ---- */
.nx-wall{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--nx-ground);animation:nxFade 1.2s ease both}
.nx-wall i{position:absolute;border-radius:50%;filter:blur(56px);opacity:.75;will-change:transform}
.nx-wall{contain:strict}
.nx-wall .b1{width:62vmax;height:62vmax;left:-14vmax;top:-22vmax;background:var(--nx-b1);animation:nxDrift1 26s ease-in-out infinite alternate}
.nx-wall .b2{width:52vmax;height:52vmax;right:-16vmax;top:-8vmax;background:var(--nx-b2);animation:nxDrift2 30s ease-in-out infinite alternate}
.nx-wall .b3{width:46vmax;height:46vmax;left:8vmax;bottom:-24vmax;background:var(--nx-b3);animation:nxDrift3 34s ease-in-out infinite alternate}
.nx-wall .b4{width:36vmax;height:36vmax;right:4vmax;bottom:-14vmax;background:var(--nx-b4);opacity:.55;animation:nxDrift1 38s ease-in-out infinite alternate-reverse}
.nx-wall::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 40%,color-mix(in srgb,var(--nx-ground) 55%,transparent) 100%)}
@keyframes nxDrift1{to{transform:translate(9vmax,7vmax) scale(1.12)}}
@keyframes nxDrift2{to{transform:translate(-8vmax,10vmax) scale(.92)}}
@keyframes nxDrift3{to{transform:translate(10vmax,-6vmax) scale(1.08)}}
@keyframes nxFade{from{opacity:0}to{opacity:1}}

/* ---- Top bar ---- */
.nx-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:18px 22px 0}
.nx-mini{font:800 15px/1 'Unbounded','Inter',sans-serif;letter-spacing:.02em;color:var(--nx-ink);opacity:.9;animation:nxDown .8s .2s var(--nx-settle) both}
.nx-mini b{color:var(--nx-blue)}
.nx-theme{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--nx-glass-edge);background:var(--nx-chip);color:var(--nx-ink);cursor:pointer;
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);transition:transform .25s var(--nx-ease),background-color .25s;animation:nxDown .8s .25s var(--nx-settle) both}
.nx-theme:hover{transform:scale(1.06)}
.nx-theme:active{transform:scale(.94)}
.nx-theme .sun{display:none}
:root[data-theme="dark"] .nx-theme .sun{display:block}:root[data-theme="dark"] .nx-theme .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nx-theme .sun{display:block}:root:not([data-theme="light"]) .nx-theme .moon{display:none}}

/* ---- Lock-screen header ---- */
.nx-stage{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 16px 26px;text-align:center}
.nx-when{margin:0 0 14px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--nx-soft);font-variant-numeric:tabular-nums;animation:nxDown .9s .1s var(--nx-settle) both}
.nx-when .sep{opacity:.5}
.nx-time{display:inline-block}
.nx-time.roll{animation:nxRoll .5s var(--nx-settle)}
@keyframes nxRoll{from{opacity:0;transform:translateY(-60%)}to{opacity:1;transform:none}}

.nx-mark{margin:0 0 28px;display:flex;flex-direction:column;align-items:center;gap:12px;user-select:none}
.nx-mark .nyx{display:flex;font:800 clamp(76px,11vw,148px)/.84 'Unbounded','Inter',sans-serif;letter-spacing:-.025em}
.nx-mark .ch{display:inline-block;overflow:hidden;padding:0 .02em .07em}
.nx-mark .ch>span{display:inline-block;color:transparent;
  background:linear-gradient(105deg,var(--nx-ink) 0%,var(--nx-ink) 40%,var(--nx-blue) 48%,#9CC6FF 50%,var(--nx-blue) 52%,var(--nx-ink) 60%,var(--nx-ink) 100%);
  background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;
  animation:nxRise 1.2s var(--nx-settle) backwards,nxSweep 8s cubic-bezier(.45,0,.2,1) infinite;
  animation-delay:calc(.2s + var(--k) * .12s),calc(2.4s + var(--k) * .08s)}
.nx-mark .dot{align-self:flex-end;width:.15em;height:.15em;margin:0 0 .13em .05em;border-radius:50%;background:var(--nx-blue);animation:nxPop .7s .8s cubic-bezier(.34,1.56,.64,1) both}
.nx-mark .proj{font:300 clamp(18px,2.2vw,28px)/1 'Unbounded','Inter',sans-serif;text-transform:uppercase;color:var(--nx-soft);animation:nxTrack 1.3s .75s var(--nx-settle) both}
@keyframes nxRise{from{transform:translateY(105%);filter:blur(10px)}to{filter:blur(0)}}
@keyframes nxSweep{0%{background-position:100% 0}35%,100%{background-position:0% 0}}
@keyframes nxPop{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
@keyframes nxTrack{from{letter-spacing:1.1em;opacity:0;filter:blur(4px)}to{letter-spacing:.55em;opacity:1;filter:none}}
@keyframes nxDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ---- Glass card ---- */
.nx-card-wrap{width:100%;max-width:400px;perspective:1100px;animation:nxCardIn 1s .45s var(--nx-settle) both}
@keyframes nxCardIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.nx-card{--rx:0deg;--ry:0deg;--sx:50%;--sy:0%;position:relative;overflow:hidden;padding:30px 28px 22px;border-radius:28px;text-align:left;
  background:var(--nx-glass);border:1px solid var(--nx-glass-edge);box-shadow:var(--nx-shadow),inset 0 1px 0 var(--nx-glass-edge);
  -webkit-backdrop-filter:blur(34px) saturate(180%);backdrop-filter:blur(34px) saturate(180%);
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .7s var(--nx-settle)}
.nx-card.is-tilt{transition:transform .15s linear}
.nx-sheen{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--sx) var(--sy),rgba(255,255,255,.28),transparent 45%);opacity:0;transition:opacity .4s}
.nx-card.is-tilt .nx-sheen{opacity:1}
.nx-card.is-shake{animation:nxShake .6s cubic-bezier(.36,.07,.19,.97)}
@keyframes nxShake{10%,90%{translate:-2px 0}20%,80%{translate:4px 0}30%,50%,70%{translate:-9px 0}40%,60%{translate:9px 0}}

.nx-avatar{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(145deg,#3B8BFF,#0058C9);box-shadow:0 10px 22px -10px rgba(0,88,201,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.nx-greet{margin:0;text-align:center;font-size:13px;font-weight:600;color:var(--nx-soft)}
.nx-card h2{margin:4px 0 20px;text-align:center;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
.nx-error{display:flex;align-items:center;gap:8px;margin:-6px 0 14px;padding:9px 12px;border-radius:12px;font-size:13px;font-weight:500;color:var(--nx-red);background:color-mix(in srgb,var(--nx-red) 10%,transparent)}
.nx-error svg{flex-shrink:0}

/* Pill fields with a label that floats up when you type. */
.nx-field{position:relative;margin-bottom:12px}
.nx-field input{display:block;width:100%;box-sizing:border-box;height:54px;padding:22px 16px 6px;border-radius:14px;border:1px solid var(--nx-field-line)!important;background:var(--nx-field)!important;color:var(--nx-ink);font:inherit;font-size:16px;
  transition:border-color .2s,box-shadow .25s var(--nx-ease),background-color .2s}
.nx-field input:hover{border-color:color-mix(in srgb,var(--nx-blue) 40%,var(--nx-field-line))!important}
.nx-field input:focus{outline:none;border-color:var(--nx-blue)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--nx-blue) 22%,transparent)!important}
.nx-field label{position:absolute;left:17px;top:17px;font-size:16px;color:var(--nx-faint);pointer-events:none;transform-origin:left top;transition:transform .25s var(--nx-ease),color .2s}
.nx-field input:focus+label,.nx-field input:not(:placeholder-shown)+label{transform:translateY(-9px) scale(.72);color:var(--nx-soft)}
.nx-field input:focus+label{color:var(--nx-blue)}
.nx-field input#loginPass{padding-right:50px}
.nx-eye{position:absolute;right:8px;top:9px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--nx-faint);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s}
.nx-eye:hover{background:var(--nx-glass-line);color:var(--nx-ink)}
.nx-eye .shut,.nx-eye.on .open{display:none}.nx-eye.on .shut{display:block}
.nx-caps{display:flex;align-items:center;gap:6px;height:0;margin:0;overflow:hidden;font-size:12.5px;font-weight:600;color:#B25000;opacity:0;transition:height .25s var(--nx-ease),opacity .2s,margin .25s}
.nx-caps.on{height:18px;margin:-2px 0 10px;opacity:1}

/* Blue pill button: lifts on hover, presses in, spins while signing in. */
.nx-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;margin-top:6px;border:0;border-radius:999px;cursor:pointer;
  background:var(--nx-blue);color:#fff;font:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--nx-blue) 90%,transparent);transition:transform .3s var(--nx-ease),background-color .2s,box-shadow .3s}
.nx-btn:hover{background:var(--nx-blue-hover);transform:translateY(-1px);box-shadow:0 16px 28px -14px color-mix(in srgb,var(--nx-blue) 95%,transparent)}
.nx-btn:active{transform:scale(.97)}
.nx-btn .arr{transition:transform .3s var(--nx-ease)}
.nx-btn:hover .arr{transform:translateX(3px)}
.nx-btn .spin{display:none;width:18px;height:18px;border-radius:50%;border:2.2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:nxSpin .8s linear infinite}
.nx-btn.is-busy{pointer-events:none}
.nx-btn.is-busy .lbl,.nx-btn.is-busy .arr{display:none}.nx-btn.is-busy .spin{display:block}
@keyframes nxSpin{to{transform:rotate(360deg)}}
.nx-btn:focus-visible,.nx-theme:focus-visible,.nx-eye:focus-visible{outline:3px solid color-mix(in srgb,var(--nx-blue) 55%,transparent);outline-offset:2px}
.nx-help{margin:16px 0 0;text-align:center;font-size:12.5px;line-height:1.5;color:var(--nx-faint)}

/* ---- Footer: what's inside, gliding by ---- */
.nx-foot{position:relative;z-index:1;padding:0 0 16px;animation:nxFade 1.2s 1s both}
.nx-rail{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.nx-rail-track{display:flex;gap:10px;width:max-content;animation:nxMarquee 48s linear infinite}
.nx-rail:hover .nx-rail-track{animation-play-state:paused}
.nx-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--nx-soft);
  background:var(--nx-chip);border:1px solid var(--nx-glass-edge);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.nx-chip svg{color:var(--nx-blue)}
@keyframes nxMarquee{to{transform:translateX(-50%)}}
.nx-org{margin:12px 0 0;text-align:center;font-size:11.5px;letter-spacing:.08em;color:var(--nx-faint)}

@media (max-width:520px){
  .nx-top{padding:14px 16px 0}
  .nx-stage{justify-content:flex-start;padding-top:22px}
  .nx-mark{margin-bottom:22px}
  .nx-mark .nyx{font-size:72px}
  .nx-card{padding:24px 20px 18px;border-radius:24px}
  .nx-when{font-size:13.5px}
}
@media (max-height:760px) and (min-width:521px){.nx-mark .nyx{font-size:clamp(64px,9vw,104px)}.nx-mark{margin-bottom:20px}}
@media (prefers-reduced-motion:reduce){
  .nx-wall,.nx-wall i,.nx-mini,.nx-theme,.nx-when,.nx-time.roll,.nx-mark .ch>span,.nx-mark .dot,.nx-mark .proj,.nx-card-wrap,.nx-card.is-shake,.nx-foot,.nx-rail-track{animation:none}
  .nx-mark .ch>span{color:var(--nx-ink);background:none}
  .nx-mark .proj{letter-spacing:.55em}
  .nx-card,.nx-btn,.nx-theme,.nx-field input,.nx-field label{transition:none}
}

/* ---- Security check (captcha) ---- */
.nx-captcha{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.nx-captcha img{display:block;flex:0 0 auto;width:132px;height:40px;object-fit:contain;border-radius:10px;border:1px solid var(--nx-field-line);background:#EEF2F9;user-select:none;-webkit-user-drag:none}
.nx-refresh{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--nx-field-line);background:var(--nx-field);color:var(--nx-blue);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s,transform .3s var(--nx-ease)}
.nx-refresh:hover{background:color-mix(in srgb,var(--nx-blue) 10%,var(--nx-field))}
.nx-refresh:active{transform:scale(.92)}
.nx-refresh:focus-visible{outline:3px solid color-mix(in srgb,var(--nx-blue) 55%,transparent);outline-offset:2px}
.nx-refresh.spin svg{animation:nxSpinOnce .5s var(--nx-ease)}
@keyframes nxSpinOnce{to{transform:rotate(360deg)}}
#loginCaptcha{text-transform:uppercase;letter-spacing:.32em;font-weight:600}
@media (prefers-reduced-motion:reduce){.nx-refresh.spin svg{animation:none}}