/* =============================================================================
   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:     #3b5efd;
    --n4a-accent-2:   #6a4bff;
    --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; }

/* ---------- 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; }
}