/* NEXAR Experience 4.0 — production layer phase 02.
   Scoped to auth/launcher only: workspace CRUD, platform and HR mechanics untouched. */

/* 01 — Brand mark, transient boot. No artificial page-load timer. */
.brand .brand-icon,.topbar .brand-icon,.nx4-boot .brand-icon{
  background:transparent!important;border:0!important;padding:0;box-shadow:none!important;
  border-radius:0;overflow:visible;
}
.brand .brand-icon img{width:100%;height:100%;object-fit:contain}
.nx4-boot{
  isolation:isolate;position:relative;overflow:hidden;gap:11px;
  background:radial-gradient(ellipse at 50% 43%,#3059AD48,transparent 42%),linear-gradient(145deg,#070F20,#0B1932 62%,#121B3B);
  color:#C4D2EC;min-height:100dvh;
}
.nx4-boot:before{
  content:"";position:absolute;inset:-25%;background:repeating-linear-gradient(0deg,transparent,transparent 61px,#A1B7EA0A 62px),
  repeating-linear-gradient(90deg,transparent,transparent 61px,#A1B7EA0A 62px);
  opacity:.28;transform:rotate(-16deg);pointer-events:none;
}
.nx4-boot .brand-icon{position:relative;width:96px!important;height:96px!important;display:grid;place-items:center;border-radius:22px!important;animation:nx4-logo-enter .65s var(--nx4-ease) both!important}
.nx4-boot .brand-icon img{width:77px;height:77px;object-fit:contain}
.nx4-boot strong{font:900 30px var(--nx4-font);letter-spacing:.21em;color:#F6F9FF;direction:ltr;margin-inline-end:-.21em}
.nx4-boot small{font:700 8px var(--nx4-font);letter-spacing:.18em;color:#91A9D0;direction:ltr}
.nx4-boot>span:nth-of-type(2){font-size:11px;margin-top:15px;color:#A8B9D7}
.nx4-boot-track{display:block;width:150px;height:3px;border-radius:10px;background:#FFFFFF1E;margin-top:3px;overflow:hidden}
.nx4-boot-track i{display:block;height:100%;width:45%;border-radius:10px;background:linear-gradient(90deg,#5088FA,#56CEF7,#9974ED);animation:nx4-track 1.6s ease-in-out infinite alternate}
@keyframes nx4-logo-enter{from{opacity:0;transform:translateY(13px) scale(.9)}to{opacity:1;transform:none}}
@keyframes nx4-track{from{transform:translateX(90%)}to{transform:translateX(-185%)}}

/* 02 — Premium authentic sign-in. Supabase form IDs/field names are unchanged. */
.nx4-auth{min-height:100dvh;grid-template-columns:minmax(0,1.08fr) minmax(440px,.92fr);background:var(--nx4-paper);font-family:var(--nx4-font)}
.nx4-auth .auth-scene{
  isolation:isolate;min-height:100dvh;padding:clamp(25px,3.5vw,56px) clamp(24px,5vw,80px) 30px;
  background:radial-gradient(ellipse 48% 44% at 73% 28%,#3561B078,transparent 100%),
  radial-gradient(ellipse 50% 52% at 2% 82%,#4D3A8B52,transparent 100%),
  linear-gradient(125deg,#08152D 3%,#162E5C 74%,#121D3B);
  color:#F5F8FF;overflow:hidden;
}
.nx4-auth .auth-scene:after{
  content:"";position:absolute;z-index:0;inset:6% -9% 14% 9%;
  border:1px solid #9DC3FF16;border-radius:50%;transform:rotate(-18deg);
  box-shadow:0 0 0 72px #FFFFFF04,0 0 0 156px #FFFFFF03;
  pointer-events:none;
}
.nx4-auth .auth-scene .brand{position:relative;z-index:2;align-self:flex-start;display:flex;align-items:center;gap:9px}
.nx4-auth .auth-scene .brand strong{color:#FFFFFF;font-weight:900;letter-spacing:.18em;font-size:21px}
.nx4-auth .auth-scene .brand small{font-size:9px;letter-spacing:.08em;color:#B0C5E6}
.nx4-auth .auth-scene .brand-icon{width:46px;height:46px}
.nx4-auth .nx4-auth-art{
  position:absolute;inset:7% 11% 22%;display:grid;place-items:center;pointer-events:none;overflow:hidden;
}
.nx4-auth .nx4-auth-art img{
  width:clamp(170px,28vw,390px);height:auto;opacity:.11;transform:rotate(-10deg);
  filter:drop-shadow(0 0 32px #4B7BEF75);
}
.nx4-auth .nx4-auth-art-ring{position:absolute;aspect-ratio:1;width:min(46vw,430px);border-radius:50%;border:1px solid #BBD2FF16;box-shadow:0 0 0 62px #FFFFFF05,0 0 0 139px #FFFFFF03}
.nx4-auth .scene-copy{position:relative;z-index:2;max-width:650px;animation:nx4-fade-up .55s var(--nx4-ease) both}
.nx4-auth .scene-eyebrow{background:#A6C3FF10;border:1px solid #B5C9FF38;color:#B4D2FF;font-size:10px;padding:7px 12px;letter-spacing:.1em}
.nx4-auth .scene-copy h1{font:900 clamp(32px,3.6vw,53px)/1.5 var(--nx4-font);letter-spacing:-.045em;margin:14px 0 8px;color:#F8FAFF}
.nx4-auth .scene-copy h1 span{color:#8DD6FF}
.nx4-auth .scene-copy p{display:block;font-size:12px;font-weight:500;color:#B8C9E5;line-height:2.2;max-width:440px;margin:0}
.nx4-auth .scene-footer{position:relative;z-index:2;gap:11px;flex-wrap:wrap;border-top:1px solid #FFFFFF1D;padding-top:17px;font-size:10px;color:#B0C5E8}
.nx4-auth .scene-footer span:not(:last-child):after{content:"•";color:#7195CF;margin-inline-start:10px}
.nx4-auth .auth-form-side{background:var(--nx4-paper);padding:clamp(24px,5.5vw,82px);min-width:0}
.nx4-auth .auth-card{max-width:430px;width:100%;animation:nx4-fade-up .5s var(--nx4-ease) both}
.nx4-auth-logo{display:flex;justify-content:flex-start;margin-bottom:clamp(30px,5vh,54px)}
.nx4-auth-logo .brand{display:flex;gap:11px;align-items:center}
.nx4-auth-logo .brand-icon{width:39px;height:39px}
.nx4-auth-logo .brand strong{font-size:20px;color:var(--nx4-text);font-weight:900}
.nx4-auth-logo .brand small{font-size:8px;color:var(--nx4-muted)}
.nx4-auth .auth-card .kicker{font:800 10px var(--nx4-font);letter-spacing:.12em;color:var(--nx-finance-accent)}
.nx4-auth .auth-card h2{font:900 clamp(25px,2.3vw,32px)/1.5 var(--nx4-font);letter-spacing:-.03em;margin:8px 0 2px;color:var(--nx4-text)}
.nx4-auth .auth-card>p{color:var(--nx4-muted);font-size:12px;line-height:1.9;margin-bottom:28px}
.nx4-auth .auth-card .form-label{font-size:12px;font-weight:800;color:var(--nx4-text);margin-bottom:16px;gap:7px}
.nx4-auth .auth-card .input{
  border:1px solid var(--nx4-line-light);border-radius:var(--nx4-radius-control);min-height:47px;
  background:var(--nx4-panel);color:var(--nx4-text);padding:11px 13px;
  transition:border-color var(--nx4-motion-fast) ease,box-shadow var(--nx4-motion-fast) ease;
}
.nx4-auth .auth-card .input:focus{border-color:var(--nx4-blue);box-shadow:0 0 0 3px #427BF522}
.nx4-auth .nx4-input-frame{position:relative;display:flex;align-items:center;width:100%;min-width:0}
.nx4-auth .nx4-input-frame>.nx-icon,.nx4-auth .nx4-input-frame>.nx-vivid-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;pointer-events:none;color:#7F91B0}
.nx4-auth .nx4-input-frame .input{padding-inline-start:43px;padding-inline-end:44px}
.nx4-auth .nx4-input-frame input[type="email"]{direction:ltr;text-align:right}
.nx4-auth .nx4-input-frame input[type="password"],.nx4-auth .nx4-input-frame input[type="text"][name="password"]{direction:ltr;text-align:right}
.nx4-password-toggle{position:absolute;left:7px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#637C9E;border-radius:7px;width:35px;height:35px;display:grid;place-items:center}
.nx4-password-toggle svg{width:19px;height:19px}
.nx4-password-toggle:hover{background:color-mix(in srgb,var(--nx4-blue) 9%,var(--nx4-panel));color:var(--nx4-blue)}
.nx4-caps-hint{color:#BC5268;font-size:10px;font-weight:700}
.nx4-auth .nx4-auth-submit{
  width:100%;min-height:49px;display:flex;justify-content:space-between;align-items:center;margin-top:9px;
  border:1px solid #3E60D6;color:white;background:linear-gradient(108deg,#305BDF,#3E6CEB);border-radius:11px;
  box-shadow:0 14px 29px -19px #2D60DABA;font-size:13px;font-weight:800;
}
.nx4-auth .nx4-auth-submit:hover:not(:disabled){background:linear-gradient(108deg,#254DCB,#335ED6);box-shadow:0 16px 30px -17px #2D60DAAA}
.nx4-auth .auth-toggle{color:var(--nx4-muted);font-size:11px;line-height:1.8}
.nx4-auth .auth-toggle .text-action{font-weight:800;color:var(--nx4-blue)}
.nx4-auth .auth-card .button:disabled{opacity:.65;cursor:progress}
@keyframes nx4-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 03 — Functional app launcher: precise surfaces with a flagship hero. */
.nx4-hub{background:radial-gradient(ellipse 38% 31% at 94% 5%,#7D8FE310,transparent),var(--nx-bg);min-height:100dvh}
.nx4-hub .topbar{min-height:70px;background:color-mix(in srgb,var(--nx4-panel) 96%,transparent);border-bottom-color:var(--nx4-line-light)}
.nx4-hub .topbar .brand strong{font-size:17px;font-weight:900}
.nx4-hub .topbar .brand-icon{width:36px;height:36px}
.nx4-hub .hub-content{max-width:1440px;padding:24px clamp(16px,3.5vw,48px) 28px}
.nx4-hub .hub-hero{
 position:relative;display:flex;justify-content:space-between;align-items:stretch;
 min-height:249px;max-height:none;padding:30px clamp(24px,3.5vw,46px);
 background:linear-gradient(112deg,#09172F 0%,#142B56 58%,#30346F 100%);
 color:#FFFFFF;border:1px solid #7F96DD4C;border-radius:21px;
 box-shadow:0 22px 48px -36px #0F2B68B8;
 overflow:hidden;isolation:isolate;
}
.nx4-hub .hub-hero:before{
 content:"";inset:0;opacity:1;
 background:radial-gradient(ellipse 36% 90% at 15% 85%,#2450AE37,transparent),
 linear-gradient(105deg,transparent 30%,#A8B4FE0D 75%,transparent);
 pointer-events:none;
}
.nx4-hub .hub-hero:after{display:none!important}
.nx4-hub .hub-hero .hub-hero-content{position:relative;z-index:2;max-width:680px;align-self:center}
.nx4-hub .hub-hero .hero-eyebrow{color:#9AC2FF;font:800 10px var(--nx4-font);letter-spacing:.025em}
.nx4-hub .hub-hero .hero-live-dot{background:#68CFFF;box-shadow:0 0 0 4px #4EBEFA1D}
.nx4-hub .hub-hero .hero-heading{
 color:#FFFFFF;font:900 clamp(25px,2.8vw,38px)/1.5 var(--nx4-font);
 letter-spacing:-.03em;margin:9px 0 5px;
}
.nx4-hub .hub-hero .hero-heading span{background:none;color:#94D8FF;-webkit-text-fill-color:initial}
.nx4-hub .hub-hero .hero-sub{color:#BDCEE8;font-size:12px;line-height:1.95;max-width:48ch}
.nx4-hub .hub-hero .hero-sub strong{color:#FFFFFF}
.nx4-hub .hub-hero .hero-meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.nx4-hub .hub-hero .hero-meta span{border:1px solid #B0C9FF33;color:#E0EAFF;background:#FFFFFF0C;font-size:10px;padding:7px 10px;border-radius:8px}
.nx4-hub .hub-hero .hero-meta svg{color:#A5D7FF}
.nx4-hero-art{position:relative;display:grid;place-items:center;align-self:stretch;min-width:27%;width:34%;pointer-events:none;overflow:hidden}
.nx4-hero-grid{position:absolute;inset:-100%;transform:rotate(-24deg);background:repeating-linear-gradient(0deg,transparent,transparent 32px,#B0C7FF0E 33px),repeating-linear-gradient(90deg,transparent,transparent 32px,#B0C7FF0E 33px);opacity:.65}
.nx4-hero-art img{position:relative;z-index:1;width:clamp(110px,14vw,182px);height:auto;filter:drop-shadow(0 13px 24px #0A123877);transform:rotate(-7deg)}
.nx4-hub .applications-section{padding-top:7px}
.nx4-hub .section-heading-rich{margin-top:23px;margin-bottom:14px;align-items:end}
.nx4-hub .section-heading-rich h2{font-size:19px;font-weight:900}
.nx4-hub .section-heading-rich p{line-height:1.8;font-size:11px;margin-top:5px}
.nx4-hub .grid-apps{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.nx4-hub .app-card{
 --app-ink:color-mix(in srgb,var(--app-accent) 78%,#14243F);
 display:flex;flex-direction:column;position:relative;
 min-height:171px;padding:17px 19px 13px;border-radius:var(--nx4-radius-card);
 border:1px solid color-mix(in srgb,var(--app-accent) 19%,var(--nx4-line-light));
 background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 7%,var(--nx4-panel)) 0%,var(--nx4-panel) 64%)!important;
 box-shadow:var(--nx4-elevate);transition:transform .24s var(--nx4-ease),box-shadow .24s var(--nx4-ease),border-color .2s ease;
}
.nx4-hub .app-card:before{display:block;position:absolute;inset:0 0 auto;height:3px;background:var(--app-accent);opacity:.98;border-radius:0}
.nx4-hub .app-card:after{height:auto;right:0;top:19px;bottom:19px;width:2px;background:var(--app-accent);opacity:.65}
.nx4-hub .app-card .app-icon{
 width:47px;height:47px;flex:none;border-radius:13px;margin:0;color:var(--app-accent);
 background:color-mix(in srgb,var(--app-accent) 14%,var(--nx4-panel));
 border:1px solid color-mix(in srgb,var(--app-accent) 25%,var(--nx4-line-light));
}
.nx4-hub .app-card .app-icon svg{width:25px;height:25px;stroke-width:1.8}
.nx4-hub .app-card .app-card-main{gap:13px;align-items:flex-start}
.nx4-hub .app-card-copy strong{font-size:15px;font-weight:900;color:var(--nx4-text);margin:3px 0}
.nx4-hub .app-card .app-card-num{font-size:9px;color:var(--app-ink);letter-spacing:.05em}
.nx4-hub .app-card .app-card-description{font-size:10px;line-height:1.75;color:var(--nx4-muted);-webkit-line-clamp:2}
.nx4-hub .app-card .app-card-pointer{padding-top:13px;color:var(--app-accent);opacity:.88}
.nx4-hub .app-card-footer{padding-top:12px;margin-top:auto;border-top:1px solid color-mix(in srgb,var(--app-accent) 10%,var(--nx4-line-light))}
.nx4-hub .app-card .app-card-indicator{font-size:9px;color:var(--nx4-muted)}
.nx4-hub .app-card .app-card-indicator i{background:var(--app-accent)}
.nx4-hub .app-card .app-card-link{font-size:10px;font-weight:800;color:var(--app-ink)}
.nx4-hub .app-card:hover:not(:disabled){transform:translateY(-4px);border-color:color-mix(in srgb,var(--app-accent) 56%,var(--nx4-line-light));box-shadow:var(--nx4-shadow-hover)}
.nx4-hub .app-card:focus-visible{outline:3px solid var(--app-accent);outline-offset:3px}
.nx4-hub .app-card:disabled{opacity:.48;cursor:not-allowed;transform:none!important}
.nx4-hub .hub-footer{border-color:var(--nx4-line-light)}

/* 04 — Dark theme and adaptive sizes. */
[data-theme="dark"] .nx4-auth .auth-form-side{background:var(--nx4-paper)}
[data-theme="dark"] .nx4-auth .auth-card h2{color:var(--nx4-text)}
[data-theme="dark"] .nx4-auth .auth-card .form-label{color:var(--nx4-text)}
[data-theme="dark"] .nx4-auth .auth-card .input{background:var(--nx4-panel);border-color:var(--nx4-line-light);color:var(--nx4-text)}
[data-theme="dark"] .nx4-hub .app-card{
 --app-ink:color-mix(in srgb,var(--app-accent) 80%,white);
 background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 14%,var(--nx4-panel)),var(--nx4-panel) 64%)!important;
}
[data-theme="dark"] .nx4-hub .app-card-copy strong{color:var(--nx4-text)}
[data-theme="dark"] .nx4-hub .app-card .app-card-description{color:var(--nx4-muted)}
@media(max-width:1100px){
 .nx4-auth{grid-template-columns:1fr 1fr}
 .nx4-hub .hub-hero{min-height:228px}
 .nx4-hub .nx4-hero-art{width:25%}
}
@media(max-width:840px){
 .nx4-auth{grid-template-columns:1fr}
 .nx4-auth .auth-scene{min-height:270px;padding:22px 28px 23px;gap:27px}
 .nx4-auth .auth-scene .brand{align-self:flex-start}
 .nx4-auth .scene-copy h1{font-size:29px;line-height:1.45}
 .nx4-auth .scene-copy p{max-width:620px;font-size:11px;line-height:1.85}
 .nx4-auth .scene-footer{display:none}
 .nx4-auth .nx4-auth-art{inset:0 10% 0 20%;opacity:.5}
 .nx4-auth .auth-form-side{padding:28px 20px 42px;min-height:calc(100dvh - 270px)}
 .nx4-auth .auth-card{max-width:530px}
 .nx4-auth-logo{display:none}
 .nx4-hub .grid-apps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
 .nx4-auth .auth-scene{min-height:203px;padding:21px 18px 20px;gap:14px}
 .nx4-auth .auth-scene .brand strong{font-size:17px}
 .nx4-auth .auth-scene .brand small{font-size:8px}
 .nx4-auth .scene-eyebrow{font-size:8px;padding:5px 9px}
 .nx4-auth .scene-copy h1{font-size:23px;line-height:1.5;margin:8px 0 3px}
 .nx4-auth .scene-copy p{font-size:10px;max-width:390px;line-height:1.7}
 .nx4-auth .nx4-auth-art{inset:0 0 0 25%;opacity:.36}
 .nx4-auth .auth-form-side{padding:23px 19px 34px;min-height:calc(100dvh - 203px);align-items:flex-start}
 .nx4-auth .auth-card{max-width:none}
 .nx4-auth .auth-card h2{font-size:25px}
 .nx4-auth .auth-card>p{margin-bottom:20px}
 .nx4-auth .auth-card .form-label{margin-bottom:14px}
 .nx4-hub .hub-content{padding:12px 12px 22px}
 .nx4-hub .hub-hero{min-height:207px;padding:19px 17px;border-radius:15px}
 .nx4-hub .hub-hero .hero-heading{font-size:24px;line-height:1.42}
 .nx4-hub .hub-hero .hero-sub{font-size:10px;line-height:1.75;max-width:35ch}
 .nx4-hub .hub-hero .hero-meta{margin-top:12px;gap:5px}
 .nx4-hub .hub-hero .hero-meta span{font-size:9px;padding:5px 7px}
 .nx4-hero-art{min-width:30px;width:24%;opacity:.55}
 .nx4-hero-art img{width:90px;max-width:none}
 .nx4-hub .section-heading-rich{margin-top:17px;margin-bottom:12px}
 .nx4-hub .grid-apps{grid-template-columns:1fr 1fr;gap:9px}
 .nx4-hub .app-card{min-height:169px;padding:12px 11px 10px;border-radius:13px}
 .nx4-hub .app-card .app-card-main{flex-wrap:wrap;gap:7px}
 .nx4-hub .app-card .app-icon{width:38px;height:38px;border-radius:10px}
 .nx4-hub .app-card .app-icon svg{width:21px;height:21px}
 .nx4-hub .app-card-copy{flex:1 1 100%;order:2}
 .nx4-hub .app-card-copy strong{font-size:12px;line-height:1.55;margin:3px 0 2px}
 .nx4-hub .app-card .app-card-num{font-size:8px;margin:0}
 .nx4-hub .app-card .app-card-description{font-size:9px;line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 .nx4-hub .app-card .app-card-pointer{margin-inline-start:auto;padding:5px;order:1}
 .nx4-hub .app-card .app-card-pointer svg{width:14px;height:14px}
 .nx4-hub .app-card-footer{display:flex;justify-content:space-between;gap:4px;padding-top:8px;margin-top:auto}
 .nx4-hub .app-card .app-card-link{font-size:8px}
 .nx4-hub .app-card .app-card-indicator{font-size:8px}
}
@media(max-width:370px){
 .nx4-hub .grid-apps{grid-template-columns:1fr}
 .nx4-hub .app-card{min-height:130px}
 .nx4-hub .app-card .app-card-main{flex-wrap:nowrap}
 .nx4-hub .app-card-copy{flex:1;order:initial}
 .nx4-hub .app-card .app-card-pointer{order:initial}
 .nx4-hub .app-card .app-card-description{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .nx4-auth .auth-card,.nx4-auth .scene-copy,.nx4-boot .brand-icon{animation:none!important}
 .nx4-boot-track i{animation:none;width:100%}
 .nx4-hub .app-card{transition:none!important}
}