/* =============================================================================
   net4-auth.css  —  Net4Courier public pages (landing + login) modern theme
   -----------------------------------------------------------------------------
   Self-contained, framework-agnostic. Used by the standalone (Layout=null)
   pages Views/Home/Home.cshtml and Views/Login/Login.cshtml, which run on
   Bootstrap 3 + jQuery 2.2. Recreates the "cosmic" deep-space login look:
   nebula gradient + starfield + floating module nodes + frosted glass card.
   No image binary required.
   ============================================================================= */

:root {
    --n4a-ink:        #1f2733;
    --n4a-ink-muted:  #6b7280;
    --n4a-accent:     #2563eb;   /* blue-600 / indigo-600, as the app skin (n4c-tb-skin.css) */
    --n4a-accent-2:   #4f46e5;
    --n4a-gold:       #f6a821;
    --n4a-card:       rgba(255,255,255,.97);
    --n4a-radius:     16px;
}

/* ---------- Page canvas: deep-space gradient ---------- */
html, body { height: 100%; }
body.n4-auth-body {
    margin: 0;
    font-family: 'Heebo', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #e7ecf6;
    background: #0a0e1f;
    background:
        radial-gradient(1200px 700px at 78% 18%, rgba(58,94,253,.30), transparent 60%),
        radial-gradient(900px 600px at 12% 85%, rgba(106,75,255,.26), transparent 55%),
        radial-gradient(700px 500px at 50% 50%, rgba(20,40,90,.55), transparent 70%),
        linear-gradient(160deg, #070b1a 0%, #0d1430 45%, #131c41 100%);
    overflow-x: hidden;
}

.n4-auth {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow: hidden;
}

/* ---------- Subtle grid + starfield layers ---------- */
.n4-grid,
.n4-stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.n4-grid {
    background-image:
        linear-gradient(rgba(120,150,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,150,255,.05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 80%);
}

/* Stars via layered box-shadow dots */
.n4-stars::before,
.n4-stars::after {
    content: "";
    position: absolute;
    width: 2px; height: 2px; border-radius: 50%;
    background: transparent;
    top: 0; left: 0;
    box-shadow:
        80px 60px rgba(255,255,255,.7),  220px 140px rgba(255,255,255,.5),
        420px 90px rgba(160,200,255,.8), 560px 220px rgba(255,255,255,.6),
        700px 120px rgba(255,255,255,.5), 880px 300px rgba(180,210,255,.7),
        1040px 80px rgba(255,255,255,.6), 1180px 240px rgba(255,255,255,.5),
        160px 360px rgba(255,255,255,.5), 360px 460px rgba(170,200,255,.6),
        620px 520px rgba(255,255,255,.45),820px 560px rgba(255,255,255,.55),
        980px 470px rgba(190,215,255,.6), 1220px 520px rgba(255,255,255,.5),
        120px 620px rgba(255,255,255,.5), 480px 680px rgba(255,255,255,.45),
        760px 700px rgba(180,210,255,.55),1100px 660px rgba(255,255,255,.5);
}
.n4-stars::before { animation: n4drift 80s linear infinite, n4twinkle 5s ease-in-out infinite; }
.n4-stars::after  { opacity: .5; animation: n4drift-b 140s linear infinite; }

/* ---------- Floating module nodes ---------- */
.n4-nodes { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.n4-node {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .3px;
    color: rgba(214,224,245,.82);
    white-space: nowrap;
    animation: n4float 7s ease-in-out infinite;
}
.n4-node::before {
    content: "";
    width: 9px; height: 9px; border-radius: 50%;
    background: #5cc8ff;
    box-shadow: 0 0 10px 2px rgba(92,200,255,.8);
    animation: n4pulse 2.4s ease-in-out infinite;
}
.n4-node.gold::before  { background: var(--n4a-gold); box-shadow: 0 0 10px 2px rgba(246,168,33,.7); }
.n4-node.violet::before{ background: #a98bff; box-shadow: 0 0 10px 2px rgba(169,139,255,.7); }

/* scattered placement (hidden on small screens) */
.n4-node.n1 { top: 16%;  left: 14%; animation-delay: .0s; }
.n4-node.n2 { top: 24%;  right: 13%; animation-delay: .8s; }
.n4-node.n3 { top: 44%;  left: 7%;   animation-delay: 1.4s; }
.n4-node.n4 { top: 40%;  right: 6%;  animation-delay: .4s; }
.n4-node.n5 { bottom: 26%;left: 12%;  animation-delay: 1.1s; }
.n4-node.n6 { bottom: 18%;right: 14%; animation-delay: .6s; }
.n4-node.n7 { bottom: 12%;left: 33%;  animation-delay: 1.7s; }
.n4-node.n8 { top: 14%;   left: 45%;  animation-delay: 1.0s; }
.n4-node.n9 { bottom: 30%;right: 30%; animation-delay: 1.9s; }

@keyframes n4float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-14px); }
}

/* ---------- Cosmic motion ---------- */
@keyframes n4drift   { from { transform: translate(0,0); }                  to { transform: translate(-140px,-90px); } }
@keyframes n4drift-b { from { transform: translate(40px,30px) scale(1.4); } to { transform: translate(180px,170px) scale(1.4); } }
@keyframes n4twinkle { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes n4pulse   { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.5); opacity: 1; } }
@keyframes n4aurora  { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(4%,-3%) scale(1.14); } }
@keyframes n4cardin  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* (the previous aurora glow is replaced by the ported lg-blob nebula below) */
.n4-auth::before { content: none; }

/* Card entrance */
.n4-card { animation: n4cardin .6s ease-out both; }

/* =============================================================================
   Cosmic scene ported from the Truebooks (MultiModule) login — drifting nebula
   blobs, core glow, rotating radar sweep, expanding ping rings, twinkling stars
   and a CSS-only rotating module orbit. Markup: Views/Shared/_CosmicBackground.cshtml
   ============================================================================= */
.lg-grid{position:fixed;inset:0;z-index:0;opacity:.7;background-image:linear-gradient(rgba(96,165,250,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.10) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000,transparent 75%);mask-image:radial-gradient(circle at 50% 45%,#000,transparent 75%)}
.lg-stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.lg-star{position:absolute;width:2px;height:2px;border-radius:9999px;background:#cfe0ff;animation:lg-twinkle 4s ease-in-out infinite}
.lg-blob{position:fixed;border-radius:50%;filter:blur(60px);z-index:0;pointer-events:none}
.lg-blob1{top:-8rem;right:-6rem;width:40rem;height:40rem;background:radial-gradient(circle,rgba(59,130,246,.45),transparent 70%);animation:lg-blob 18s ease-in-out infinite}
.lg-blob2{bottom:-10rem;left:-8rem;width:36rem;height:36rem;background:radial-gradient(circle,rgba(99,102,241,.42),transparent 70%);animation:lg-blob 18s ease-in-out infinite;animation-delay:-9s}
.lg-coreglow{position:fixed;left:50%;top:50%;width:520px;height:520px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.35),transparent 65%);filter:blur(18px);z-index:0;animation:lg-glow 4s ease-in-out infinite;pointer-events:none}
.lg-radar{position:fixed;left:50%;top:50%;width:1300px;height:1300px;border-radius:50%;z-index:0;background:conic-gradient(from 0deg, rgba(96,165,250,0) 0deg, rgba(96,165,250,.28) 28deg, rgba(96,165,250,0) 60deg);-webkit-mask:radial-gradient(circle,#000 14%,transparent 72%);mask:radial-gradient(circle,#000 14%,transparent 72%);transform:translate(-50%,-50%);animation:lg-radar 7s linear infinite;pointer-events:none}
.lg-pings{position:fixed;left:50%;top:50%;z-index:0;pointer-events:none}
.lg-ping{position:absolute;left:50%;top:50%;width:340px;height:340px;border:1px solid rgba(96,165,250,.45);border-radius:50%;animation:lg-ping 5.4s ease-out infinite}
.lg-orbit{position:fixed;inset:0;z-index:0;pointer-events:none}
.lg-orbit-scale{position:absolute;inset:0;transform:scaleX(1.42);transform-origin:50% 50%}
.lg-ring{position:absolute;left:50%;top:50%}
.o-spin{animation:lg-spin 30s linear infinite}
.o-spin2{animation:lg-spin 24s linear infinite;animation-direction:reverse}
.o-rev{animation:lg-spin 30s linear infinite;animation-direction:reverse}
.o-rev2{animation:lg-spin 24s linear infinite}
.lg-spokes{position:absolute;left:50%;top:50%;width:700px;height:700px;margin:-350px 0 0 -350px;overflow:visible}
.lg-seat{position:absolute;left:50%;top:50%;width:0;height:0}
.lg-mod{display:flex;align-items:center;gap:8px;white-space:nowrap;pointer-events:auto;transition:transform .25s ease}
.lg-mod:hover{transform:scale(1.14)}
.lg-dot{width:9px;height:9px;border-radius:9999px;background:#60a5fa;flex:none;animation:lg-dot 3s ease-in-out infinite}
.lg-mod:hover .lg-dot{box-shadow:0 0 18px 5px rgba(96,165,250,1);background:#93c5fd}
.lg-mod-label{font-size:12px;font-weight:600;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(8,15,35,.7)}
#lgOrbit:hover .o-spin,#lgOrbit:hover .o-spin2,#lgOrbit:hover .o-rev,#lgOrbit:hover .o-rev2{animation-play-state:paused}

@keyframes lg-twinkle{0%,100%{opacity:.15}50%{opacity:.9}}
@keyframes lg-blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.15)}66%{transform:translate(-30px,30px) scale(.9)}}
@keyframes lg-glow{0%,100%{opacity:.3}50%{opacity:.7}}
@keyframes lg-radar{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes lg-ping{0%{transform:translate(-50%,-50%) scale(.18);opacity:.55}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes lg-spin{to{transform:rotate(360deg)}}
@keyframes lg-dot{0%,100%{box-shadow:0 0 7px 1px rgba(96,165,250,.55)}50%{box-shadow:0 0 13px 3px rgba(96,165,250,.95)}}

@media (max-width:1023px){ .lg-orbit,.lg-radar,.lg-pings{display:none} }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .n4-card,
    .lg-star, .lg-blob, .lg-coreglow, .lg-radar, .lg-ping, .lg-dot,
    .o-spin, .o-spin2, .o-rev, .o-rev2 { animation: none !important; }
}

/* ---------- Top-right utility button ---------- */
.n4-topright {
    position: fixed; top: 20px; right: 22px; z-index: 5;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    font-size: 13px; font-weight: 600; text-decoration: none;
    color: #dfe6f5;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    transition: background .15s ease, color .15s ease;
}
.n4-topright:hover { background: rgba(255,255,255,.16); color: #fff; text-decoration: none; }

/* ---------- Stage ---------- */
.n4-stage {
    position: relative; z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* Compact hero tagline above the card (the "ONE ERP" idea) */
.n4-hero { text-align: center; margin-bottom: 2px; }
.n4-hero h1 {
    margin: 0; font-weight: 800; letter-spacing: 1px;
    font-size: 30px; color: #fff; text-shadow: 0 2px 24px rgba(60,100,255,.45);
}
.n4-hero h1 span { color: var(--n4a-gold); }
.n4-hero p { margin: 4px 0 10px; color: #b9c4de; font-size: 15px; }
.n4-hero .n4-chips {
    display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.n4-hero .n4-chips span {
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    color: #cdd8f2;
    padding: 4px 12px; border-radius: 999px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
}

/* ---------- Glass login card ---------- */
.n4-card {
    width: 100%; max-width: 410px;
    background: var(--n4a-card);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: var(--n4a-radius);
    box-shadow: 0 24px 70px rgba(4,10,30,.55), 0 2px 6px rgba(4,10,30,.3);
    padding: 30px 30px 22px;
    color: var(--n4a-ink);
}

/* Brand wordmark */
.n4-brand {
    display: flex; align-items: center; justify-content: center; gap: 11px;
    margin-bottom: 4px;
}
.n4-brand .mark {
    width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; font-weight: 800;
    background: linear-gradient(135deg, var(--n4a-accent), var(--n4a-accent-2));
    box-shadow: 0 6px 16px rgba(59,94,253,.4);
}
.n4-brand .word {
    font-size: 23px; font-weight: 800; letter-spacing: .5px; line-height: 1;
    color: #16203a;
}
.n4-brand .word b { color: var(--n4a-accent); font-weight: 800; }
.n4-brand .word i { color: var(--n4a-gold); font-style: normal; }
.n4-subtitle {
    text-align: center; font-size: 12.5px; color: var(--n4a-ink-muted);
    margin: 2px 0 18px;
}
.n4-subtitle .dot { color: #18b06b; font-size: 10px; vertical-align: middle; }

/* Brand logo — TRUEBOOKS · net4courier wordmark (recreated to match the supplied logo) */
.n4-logo {
    display: flex; flex-direction: column;
    width: -moz-fit-content; width: fit-content;   /* shrink to wordmark so the sub right-aligns under it */
    margin: 0 auto 20px;
}
.n4-logo .logo-word { font-size: 34px; font-weight: 800; letter-spacing: 1px; line-height: 1; white-space: nowrap; }
.n4-logo .t-true  { color: #9b9b9b; }
.n4-logo .t-books { color: #16398c; }
.n4-logo .logo-sub {
    align-self: flex-end; margin-top: 0;
    font-size: 16px; font-weight: 600; letter-spacing: .2px; color: #9b9b9b;
}

.n4-card h2.n4-title {
    font-size: 15px; font-weight: 700; color: var(--n4a-ink);
    margin: 0 0 14px;
}

/* Fields */
.n4-card .form-group { margin-bottom: 14px; position: relative; }
.n4-card label.n4-lbl {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: #8a93a6; margin-bottom: 5px;
}
.n4-card .form-control,
.n4-card input[type=email],
.n4-card input[type=password],
.n4-card input[type=text] {
    width: 100%; height: 46px;
    padding: 10px 14px;
    font-size: 14px; color: var(--n4a-ink);
    background: #f6f8fc;
    border: 1px solid #e1e6ef;
    border-radius: 10px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    box-sizing: border-box;
}
.n4-card .form-control:focus,
.n4-card input:focus {
    outline: none;
    background: #fff;
    border-color: var(--n4a-accent);
    box-shadow: 0 0 0 4px rgba(59,94,253,.14);
}
.n4-card input::placeholder { color: #aab2c2; }

/* show/hide password eye */
.n4-eye {
    position: absolute; right: 12px; top: 36px;
    border: 0; background: transparent; cursor: pointer;
    color: #9aa3b4; font-size: 16px; line-height: 1; padding: 4px;
}
.n4-eye:hover { color: var(--n4a-accent); }

.n4-row-between { display: flex; justify-content: flex-end; margin: -4px 0 16px; }
.n4-link {
    font-size: 12.5px; font-weight: 600; color: var(--n4a-accent);
    text-decoration: none; cursor: pointer; background: none; border: 0;
}
.n4-link:hover { text-decoration: underline; color: #2742d6; }

/* Primary button */
.n4-btn {
    width: 100%; height: 48px; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 14px; font-weight: 700; letter-spacing: .6px; color: #fff;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--n4a-accent) 0%, var(--n4a-accent-2) 100%);
    box-shadow: 0 10px 24px rgba(59,94,253,.38);
    transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
.n4-btn:hover { filter: brightness(1.05); box-shadow: 0 12px 28px rgba(59,94,253,.5); }
.n4-btn:active { transform: translateY(1px); }

.n4-divider {
    display: flex; align-items: center; gap: 10px;
    color: #9aa3b4; font-size: 11px; font-weight: 600; letter-spacing: 1px;
    margin: 16px 0;
}
.n4-divider::before, .n4-divider::after {
    content: ""; flex: 1; height: 1px; background: #e6e9f1;
}

.n4-altrow { display: flex; gap: 10px; }
.n4-btn-ghost {
    flex: 1; height: 44px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: #41496a;
    background: #fff; border: 1px solid #e1e6ef; border-radius: 10px;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.n4-btn-ghost:hover { border-color: var(--n4a-accent); background: #f7f9ff; text-decoration: none; color: #41496a; }

/* Card footer */
.n4-card .n4-foot {
    margin-top: 18px; padding-top: 14px; border-top: 1px solid #eef0f5;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.n4-card .n4-foot small { color: #97a0b2; font-size: 11px; line-height: 1.35; }
.n4-card .n4-foot img { height: 22px; opacity: .9; }
.n4-card .n4-foot img.n4-foot-logo { height: 34px; max-width: 140px; width: auto; object-fit: contain; opacity: 1; }

/* ---------- Restyle the kept Bootstrap-3 modals (Forgot / Change / Trial) ---------- */
.modal-content {
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 70px rgba(4,10,30,.55) !important;
    overflow: hidden;
}
.modal-header { border-bottom: 0 !important; }
.modal-header .close {
    background: linear-gradient(135deg, var(--n4a-accent), var(--n4a-accent-2)) !important;
    opacity: 1 !important; width: 30px; height: 30px; color: #fff !important;
    border-radius: 50%; border: 0;
}
.modal .button-primary,
.n4-auth .button-primary {
    background: linear-gradient(135deg, var(--n4a-accent), var(--n4a-accent-2)) !important;
    border: 0 !important; color: #fff !important; border-radius: 10px !important;
    font-weight: 700 !important; letter-spacing: .4px; padding: 10px 22px !important;
}
.modal .form-control { border-radius: 10px; height: 44px; }

/* ---------- Fit the card to the window (2026-11-01) ----------
   The full card is ~650px tall, so on a laptop (~640px of page under the browser bar) it ran
   off the bottom. The page is now exactly one screen: the card is centred in it, and on
   shorter windows it tightens its spacing instead of scrolling. Only if the window is
   shorter than even the compact card does the page scroll. */
.n4-auth { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; }
.n4-stage { margin: auto 0; }

/* "Show" sits on the password box's centre line, whatever the box height */
.n4-card .form-group .n4-eye {
    top: auto; bottom: 0; height: 46px;
    display: inline-flex; align-items: center;
    font-size: 13px; font-weight: 600;
}

@media (max-height: 820px) {
    .n4-auth { padding: 14px 16px; }
    .n4-card { padding: 22px 26px 16px; }
    .n4-logo { margin-bottom: 14px; }
    .n4-logo .logo-word { font-size: 29px; }
    .n4-logo .logo-sub { font-size: 14px; }
    .n4-tabs { margin-bottom: 12px !important; }
    .n4-tab { padding: 7px 6px !important; }
    .n4-card h2.n4-title { margin-bottom: 10px; }
    .n4-card .form-group { margin-bottom: 10px; }
    .n4-card .form-control,
    .n4-card input[type=email],
    .n4-card input[type=password],
    .n4-card input[type=text] { height: 42px; }
    .n4-card .form-group .n4-eye { height: 42px; }
    .n4-row-between { margin: -2px 0 12px; }
    .n4-btn { height: 44px; }
    .n4-divider { margin: 10px 0; }
    .n4-btn-ghost { height: 38px; }
    .n4-card .n4-foot { margin-top: 12px; padding-top: 10px; }
    .n4-card .n4-foot img.n4-foot-logo { height: 28px; }
}
@media (max-height: 660px) {
    .n4-auth { padding: 8px 16px; }
    .n4-card { padding: 16px 24px 12px; }
    .n4-logo { margin-bottom: 10px; }
    .n4-logo .logo-word { font-size: 25px; }
    .n4-logo .logo-sub { font-size: 13px; }
    .n4-card label.n4-lbl { margin-bottom: 3px; }
    .n4-card .form-control,
    .n4-card input[type=email],
    .n4-card input[type=password],
    .n4-card input[type=text] { height: 38px; }
    .n4-card .form-group .n4-eye { height: 38px; }
    .n4-btn { height: 40px; }
    .n4-divider { margin: 6px 0; }
    .n4-btn-ghost { height: 34px; }
    .n4-card .n4-foot { margin-top: 8px; padding-top: 8px; }
    .n4-card .n4-foot img.n4-foot-logo { height: 24px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .n4-node { display: none; }
    .n4-hero h1 { font-size: 24px; }
}
@media (max-width: 460px) {
    .n4-card { padding: 24px 20px 18px; border-radius: 14px; }
    .n4-topright { top: 12px; right: 12px; }
}

/* =============================================================================
   Split sign-in (2026-11-01) - Home/Home, Login/Login, Views/Shared/_LoginSide.cshtml
   -----------------------------------------------------------------------------
   Left: a full-height white panel (brand, form, company + version). Right: the
   cosmic background with a logistics network and a short pitch. Follows the
   client's mockup, built on our own CSS: no Tailwind, no web-font or icon CDN
   (fonts self-hosted, icons inline SVG), no made-up figures on a public page.
   The page is always exactly one window; shorter windows tighten the form
   instead of scrolling. Phones get the form panel alone.
   ============================================================================= */
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('../fonts/InterVariable.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url('../fonts/PlusJakartaSans.woff2') format('woff2');
}
body.n4-auth-body { font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif; overflow: hidden; }

.n4-auth.n4x { display: block; padding: 0; min-height: 100vh; min-height: 100dvh; overflow: hidden; }
.n4x-shell {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: clamp(400px, 40vw, 580px) minmax(0, 1fr);
    height: 100vh; height: 100dvh;
}
/* The orbit, radar and rings are centred on the whole window, i.e. behind the form panel */
.n4x .lg-orbit, .n4x .lg-radar, .n4x .lg-pings, .n4x .lg-coreglow { display: none !important; }

/* ---- Form panel ---- */
.n4x-panel {
    display: flex; flex-direction: column;
    background: #fff; color: #0f172a;
    padding: clamp(18px, 3.6vh, 40px) clamp(24px, 3.6vw, 56px);
    box-shadow: 20px 0 60px rgba(2,6,23,.45);
    min-height: 0; box-sizing: border-box;
}
.n4x-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; }
/* Truebooks logo (assets/images/truebooks-logo.png, white background, 500x150) */
.n4x-brand { display: flex; align-items: center; }
.n4x-brand img { display: block; height: 46px; width: auto; margin-left: -6px; }   /* the PNG has a little white margin */
.n4x-help {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: #64748b; text-decoration: none;
}
.n4x-help svg { width: 15px; height: 15px; color: #3b82f6; }
.n4x-help:hover { color: #2563eb; text-decoration: none; }

/* The existing .n4-card styling (inputs, buttons) without the old card frame */
.n4x .n4-card.n4x-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; justify-content: center;
    width: 100%; max-width: 400px; margin: 0 auto;
    padding: 20px 0; border: 0; border-radius: 0; box-shadow: none; background: transparent;
    animation: none; color: #0f172a; box-sizing: border-box;
}
.n4x .n4-card h2.n4-title {
    margin: 0; font: 800 28px/1.2 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: -.02em; color: #0f172a;
}
.n4x .n4-card p.n4x-sub { margin: 4px 0 22px; font-size: 14px; line-height: 1.45; color: #64748b !important; }   /* Home.css: p { color:#fff !important } */
.n4x .n4-tabs {
    background: #f1f5f9 !important; border: 1px solid #e2e8f0; border-radius: 16px !important;
    padding: 5px !important; margin: 0 0 22px !important;
}
.n4x .n4-tab { border-radius: 12px !important; padding: 10px 6px !important; font-size: 12.5px !important; color: #64748b !important; }
.n4x .n4-tab.active { color: #1d4ed8 !important; background: #fff !important; box-shadow: 0 1px 3px rgba(15,23,42,.12) !important; }

.n4x .n4-card .form-group { margin-bottom: 16px; }
.n4x .n4-card label.n4-lbl { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .06em; color: #334155; }
.n4x-lblrow { display: flex; align-items: baseline; justify-content: space-between; }
.n4x-lblrow .n4-link { font-size: 12px; }
.n4x-field { position: relative; }
.n4x-field > svg {
    position: absolute; left: 15px; top: 0; bottom: 0; margin: auto 0;
    width: 16px; height: 16px; color: #94a3b8; pointer-events: none;
}
.n4x .n4-card .n4x-field input {
    height: 50px; padding-left: 42px; border-radius: 16px;
    background: #f8fafc; border: 1px solid #e2e8f0; font-weight: 500; color: #0f172a;
}
.n4x .n4-card .n4x-field input#Password { padding-right: 60px; }
.n4x .n4-card .n4x-field input:focus { background: #fff; border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(37,99,235,.15); }
.n4x .n4-card .n4x-field .n4-eye { right: 10px; height: 50px; color: #94a3b8; font-size: 12px; font-weight: 700; }
.n4x .n4-card .n4x-field .n4-eye:hover { color: #2563eb; }

.n4x .n4-btn {
    height: 54px; margin-top: 8px; border-radius: 16px;
    font: 700 14px/1 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: .04em;
    background: linear-gradient(90deg, #2563eb, #1d4ed8);
    box-shadow: 0 14px 30px rgba(37,99,235,.25);
}
.n4x .n4-btn svg { width: 14px; height: 14px; }
.n4x .n4-divider { margin: 26px 0 18px; color: #94a3b8; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.n4x .n4-divider::before, .n4x .n4-divider::after { background: #e2e8f0; }
.n4x .n4-btn-ghost {
    height: 46px; border-radius: 12px; font-size: 12.5px; font-weight: 600;
    color: #334155; background: #f8fafc; border-color: #e2e8f0;
}
.n4x .n4-btn-ghost svg { width: 15px; height: 15px; color: #94a3b8; }
.n4x .n4-btn-ghost:hover { border-color: #cbd5e1; background: #f1f5f9; color: #0f172a; }
/* "Learn More": the one link on the sign-in panel for people who are not users yet */
.n4x a.n4x-learn {
    display: flex; flex: none; width: 100%; margin-top: 10px;
    color: #1d4ed8; background: #fff; border-color: #bfdbfe; font-weight: 700;
}
.n4x a.n4x-learn svg { color: #1d4ed8; }
.n4x a.n4x-learn:hover { color: #1e40af; background: #eff6ff; border-color: #2563eb; }

/* The client's own logo: no card, border or shadow, so it sits on the white rather than on top of it.
   Multiply takes out the white or near-white background some client logos are saved with. */
.n4x-tenantlogo { flex: none; display: flex; justify-content: center; padding: 4px 0 14px; }
.n4x-tenantlogo img {
    display: block; width: auto; height: auto; max-width: min(250px, 72%); max-height: 62px;
    object-fit: contain; mix-blend-mode: multiply;
}
.n4x-foot {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 14px; border-top: 1px solid #f1f5f9;
    font-size: 12px; color: #94a3b8;
}
.n4x-foot span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n4x-ver {
    flex: none; font: 600 10.5px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    color: #475569; background: #f1f5f9; padding: 4px 8px; border-radius: 6px;
}

/* ---- Network panel ---- */
.n4x-side {
    position: relative; overflow: hidden; min-height: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: clamp(22px, 5vh, 56px) clamp(28px, 4.5vw, 64px);
    color: #fff;
    background: linear-gradient(135deg, rgba(3,27,68,.55), rgba(2,6,23,.2) 55%, rgba(15,23,42,.35));
}
.n4x-net { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.n4x-net svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.n4x-net line { stroke: rgba(56,158,255,.16); stroke-width: 1.5; }
.n4x-net line.n4x-route {
    stroke: rgba(125,211,252,.65); stroke-width: 2;
    stroke-dasharray: 6 14; animation: n4x-flow 2.4s linear infinite;
}
.n4x-node { position: absolute; transform: translate(-6px, -6px); display: flex; align-items: center; gap: 9px; }
.n4x-node i {
    position: relative; width: 12px; height: 12px; flex: none; border-radius: 50%;
    background: rgba(37,99,235,.25);
}
.n4x-node i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #389eff; box-shadow: 0 0 10px #389eff; }
.n4x-node i::before {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 1px solid rgba(56,158,255,.5); animation: n4x-ping 3.2s ease-out infinite;
}
.n4x-node:nth-child(2n) i::before { animation-delay: -1.1s; }
.n4x-node:nth-child(3n) i::before { animation-delay: -2.2s; }
.n4x-node span { font: 600 11.5px/1 'Plus Jakarta Sans', 'Inter', sans-serif; color: #bae0ff; text-shadow: 0 1px 8px rgba(2,6,23,.8); white-space: nowrap; }
@keyframes n4x-flow { to { stroke-dashoffset: -40; } }
@keyframes n4x-ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }

.n4x-top { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.n4x-hero { position: relative; z-index: 1; max-width: 640px; }
.n4x-hero p.n4x-eyebrow {
    display: flex; align-items: center; gap: 12px; margin: 0; max-width: none; color: #fcd34d !important;
    font: 700 13px/1.3 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: .13em; text-transform: uppercase;
}
.n4x-eyebrow::before { content: ""; flex: none; width: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #f59e0b, #fcd34d); }
.n4x-hero h1 {
    margin: 14px 0 12px; color: #fff; text-wrap: balance;
    font: 800 clamp(28px, 2.8vw, 40px)/1.15 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: -.02em;
}
.n4x-hero p.n4x-pitch { margin: 0; font-size: 14.5px; line-height: 1.6; color: #94a3b8 !important; max-width: 520px; }
/* Learn More, beside the client's logo */
.n4x-side a.n4x-side-learn {
    display: inline-flex; align-items: center; gap: 9px; flex: none; height: 46px; padding: 0 22px; border-radius: 999px;
    color: #fff; text-decoration: none; background: linear-gradient(135deg, #0284c7, #2563eb);
    box-shadow: 0 10px 28px rgba(14,116,233,.42), inset 0 0 0 1px rgba(255,255,255,.22);
    font: 700 14.5px/1 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: .005em; white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease;
}
.n4x-side-learn svg { width: 16px; height: 16px; transition: transform .18s ease; }
.n4x-side a.n4x-side-learn:hover, .n4x-side a.n4x-side-learn:focus-visible {
    color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 14px 34px rgba(14,116,233,.6), inset 0 0 0 1px rgba(255,255,255,.34);
}
.n4x-side-learn:hover svg { transform: translateX(3px); }
/* The optional products: one glass band, each opens the Learn More page */
.n4x-feats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; overflow: hidden; border-radius: 18px;
    background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(8px);
}
.n4x-side a.n4x-feat {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 14px 14px 15px;
    color: #fff; text-decoration: none; transition: background .18s ease;
}
.n4x-feat + .n4x-feat { border-left: 1px solid rgba(255,255,255,.1); }
.n4x-side a.n4x-feat:hover, .n4x-side a.n4x-feat:focus-visible { color: #fff; text-decoration: none; background: rgba(255,255,255,.08); }
.n4x-feat i { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: var(--t); background: var(--t-bg); }
.n4x-feat svg { width: 18px; height: 18px; }
.n4x-feat b { font: 700 14px/1.25 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: -.005em; }
.n4x-t-blue   { --t: #7dd3fc; --t-bg: rgba(56,189,248,.17); }
.n4x-t-gold   { --t: #fcd34d; --t-bg: rgba(250,204,21,.16); }
.n4x-t-green  { --t: #6ee7b7; --t-bg: rgba(52,211,153,.16); }
.n4x-t-violet { --t: #c4b5fd; --t-bg: rgba(167,139,250,.2); }
@media (prefers-reduced-motion: reduce) { .n4x-side-learn, .n4x-side-learn svg { transition: none; } }
/* The panel has its own Learn More; the form's link is for when the panel is hidden */
@media (min-width: 901px) { .n4x a.n4x-learn { display: none; } }

/* ---- Shorter windows: tighten, never scroll ---- */
/* 820 and 680 (were 760 and 620): "Learn More" made the form 56px taller */
@media (max-height: 820px) {
    .n4x a.n4x-learn { margin-top: 8px; }
    .n4x .n4-card.n4x-body { padding: 12px 0; }
    .n4x-tenantlogo { padding: 2px 0 10px; }
    .n4x-tenantlogo img { max-height: 50px; }
    .n4x .n4-card h2.n4-title { font-size: 24px; }
    .n4x .n4-card p.n4x-sub { margin-bottom: 14px; }
    .n4x .n4-tabs { margin-bottom: 14px !important; }
    .n4x .n4-tab { padding: 8px 6px !important; }
    .n4x .n4-card .form-group { margin-bottom: 12px; }
    .n4x .n4-card .n4x-field input, .n4x .n4-card .n4x-field .n4-eye { height: 44px; }
    .n4x .n4-btn { height: 46px; margin-top: 4px; }
    .n4x .n4-divider { margin: 16px 0 12px; }
    .n4x .n4-btn-ghost { height: 40px; }
    .n4x-hero h1 { margin: 12px 0 8px; }
    .n4x-feats { margin-top: 14px; }
    .n4x-side a.n4x-side-learn { height: 42px; padding: 0 18px; }
}
@media (max-height: 680px) {
    .n4x a.n4x-learn { margin-top: 6px; }
    .n4x-panel { padding-top: 14px; padding-bottom: 12px; }
    .n4x-brand img { height: 38px; }
    .n4x .n4-card.n4x-body { padding: 6px 0; }
    .n4x-tenantlogo { padding: 0 0 6px; }
    .n4x-tenantlogo img { max-height: 56px; }
    .n4x .n4-card h2.n4-title { font-size: 21px; }
    .n4x .n4-card p.n4x-sub { display: none; }
    .n4x .n4-card h2.n4-title { margin-bottom: 10px; }
    .n4x .n4-tabs { margin-bottom: 10px !important; padding: 3px !important; }
    .n4x .n4-tab { padding: 6px !important; }
    .n4x .n4-card label.n4-lbl { margin-bottom: 4px; }
    .n4x .n4-card .form-group { margin-bottom: 9px; }
    .n4x .n4-card .n4x-field input, .n4x .n4-card .n4x-field .n4-eye { height: 40px; border-radius: 12px; }
    .n4x .n4-btn { height: 42px; border-radius: 12px; }
    .n4x .n4-divider { margin: 10px 0 8px; }
    .n4x .n4-btn-ghost { height: 36px; }
    .n4x-foot { padding-top: 8px; }
    .n4x-hero p.n4x-pitch { display: none; }
    .n4x-side a.n4x-feat { padding: 10px 12px 11px; gap: 7px; }
    .n4x-feat i { width: 28px; height: 28px; border-radius: 8px; }
    .n4x-feat svg { width: 15px; height: 15px; }
    .n4x-feat b { font-size: 13px; }
    .n4x-node span { display: none; }
}

@media (max-height: 620px) { .n4x-tenantlogo img { max-height: 34px; } }

/* ---- Tablets and phones: the form panel alone ---- */
@media (max-width: 900px) {
    body.n4-auth-body { overflow: auto; background: #fff; }
    .n4-auth.n4x { overflow: visible; }
    .n4x .lg-grid, .n4x .lg-stars, .n4x .lg-blob { display: none; }
    .n4x-shell { grid-template-columns: 1fr; height: auto; min-height: 100vh; min-height: 100dvh; }
    .n4x-side { display: none; }
    .n4x-panel { box-shadow: none; padding: 18px 20px 16px; min-height: 100vh; min-height: 100dvh; }
}

@media (prefers-reduced-motion: reduce) {
    .n4x-net line.n4x-route, .n4x-node i::before { animation: none !important; }
}