/* Main layout keeps the terminal shell stable while side modules can grow. */
.lab-nav{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    width:100%;
    padding:14px max(20px,calc((100vw - var(--max-width)) / 2));
    border-bottom:1px solid rgba(25,51,95,.7);
    background:rgba(5,7,13,.82);
    backdrop-filter:blur(14px);
}

.nav-brand{
    color:var(--blue2);
    font-family:Consolas,monospace;
    font-weight:700;
    text-decoration:none;
}

.nav-links{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.nav-links a{
    border:1px solid transparent;
    border-radius:var(--radius);
    color:var(--muted);
    font-size:13px;
    padding:7px 10px;
    text-decoration:none;
    transition:border-color .2s ease,color .2s ease,background .2s ease;
}

.nav-links a:hover{
    border-color:rgba(103,179,255,.45);
    background:rgba(59,130,246,.08);
    color:var(--text);
}

.nav-links a[aria-current="page"]{
    border-color:rgba(103,179,255,.38);
    background:rgba(59,130,246,.1);
    color:var(--text);
}

.hero{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:82px 20px 74px;
    isolation:isolate;
}

.hero::before,
.hero::after{
    position:absolute;
    content:"";
    pointer-events:none;
}

.hero::before{
    inset:12% 18% auto;
    height:420px;
    background:
        radial-gradient(circle at 50% 42%,rgba(103,179,255,.26),transparent 34%),
        radial-gradient(circle at 45% 50%,rgba(59,130,246,.22),transparent 46%);
    filter:blur(16px);
    opacity:.9;
    transform:translate3d(0,0,0);
    animation:heroGlow 8s ease-in-out infinite;
    z-index:-2;
}

.hero::after{
    inset:0;
    background:
        linear-gradient(100deg,transparent 0%,rgba(128,215,255,.05) 38%,transparent 70%),
        repeating-linear-gradient(0deg,rgba(128,215,255,.035) 0 1px,transparent 1px 58px),
        repeating-linear-gradient(90deg,rgba(128,215,255,.026) 0 1px,transparent 1px 58px);
    mask-image:radial-gradient(circle at center,black 0%,transparent 74%);
    opacity:.76;
    animation:heroLightSweep 11s linear infinite;
    z-index:-3;
}

.overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 44%,rgba(4,10,25,.1),rgba(5,7,13,.64) 62%,rgba(5,7,13,.92)),
        linear-gradient(180deg,rgba(5,7,13,.38),rgba(5,7,13,.92));
    pointer-events:none;
    z-index:-1;
}

.hero-content{
    position:relative;
    width:100%;
    max-width:var(--max-width);
    text-align:center;
}

.hero-content::before{
    position:absolute;
    inset:-54px 10% auto;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--cyan),transparent);
    content:"";
    opacity:.6;
    box-shadow:0 0 24px rgba(103,179,255,.34);
}

.status-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-bottom:45px;
}

.buttons{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}

.lab-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:28px;
    align-items:start;
    max-width:var(--max-width);
    margin:0 auto 90px;
    padding:0 20px;
}

.lab-main{
    min-width:0;
}

.applications-section{
    margin-top:-18px;
}

.application-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.lab-side{
    position:sticky;
    top:82px;
    display:grid;
    gap:22px;
}

.section{
    margin:0 0 70px;
}

.archive-page{
    width:100%;
    max-width:var(--max-width);
    margin:0 auto;
    padding:72px 20px 90px;
}

.evolution-page{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:52px 20px 72px;
}

.evolution-dashboard{
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:28px;
    align-items:start;
    margin:22px 0;
}

.evolution-telemetry{
    position:sticky;
    top:82px;
}

footer{
    border-top:1px solid var(--line);
    text-align:center;
    padding:50px 20px;
    color:var(--muted);
}

footer p+p{
    margin-top:18px;
}

@media(max-width:900px){
    .status-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .application-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .lab-layout{
        grid-template-columns:1fr;
    }

    .evolution-dashboard{
        grid-template-columns:1fr;
    }

    .lab-side{
        position:static;
    }

    .evolution-telemetry{
        position:static;
    }
}

@media(max-width:700px){
    .lab-nav{
        align-items:flex-start;
        flex-direction:column;
    }

    .nav-links{
        justify-content:flex-start;
    }

    .hero{
        min-height:auto;
        padding:72px 20px 60px;
    }

    .status-grid{
        grid-template-columns:1fr;
    }

    .application-grid{
        grid-template-columns:1fr;
    }

    .archive-page{
        padding-top:42px;
    }

    .evolution-page{
        padding-top:42px;
    }
}