:root{
    --sidebar-width:280px;
    --topbar-height:72px;
    --footer-height:50px;

    --bg:#0f172a;
    --panel:#1e293b;
    --panel2:#273449;
    --border:#334155;

    --text:#f8fafc;
    --muted:#94a3b8;

    --accent:#2563eb;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    height:100%;
}

body{
    font-family:"Inter",sans-serif;
    background:var(--bg);
    color:var(--text);
}

a{
    color:inherit;
    text-decoration:none;
}

.nx-topbar{
    height:var(--topbar-height);
    background:var(--panel);
    border-bottom:1px solid var(--border);

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 25px;
}

.nx-layout{
    display:flex;
    min-height:calc(100vh - var(--topbar-height) - var(--footer-height));
}

.nx-sidebar{
    width:var(--sidebar-width);
    background:#18212f;
    border-right:1px solid var(--border);
    padding:25px;
}

.nx-sidebar ul{
    margin:40px 0 0;
    padding:0;
    list-style:none;
}

.nx-sidebar li{
    padding:14px 10px;
    border-radius:8px;
    cursor:pointer;
}

.nx-sidebar li:hover{
    background:var(--panel2);
}

.nx-main{
    flex:1;
    display:flex;
    flex-direction:column;
}

.nx-header{
    padding:25px 35px;
    border-bottom:1px solid var(--border);
}

.nx-content{
    flex:1;
    padding:35px;
}

.nx-footer{
    height:var(--footer-height);

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 25px;

    border-top:1px solid var(--border);

    background:var(--panel);
}

.nx-sidebar__brand{
    padding-bottom:24px;
    border-bottom:1px solid var(--border);
}

.nx-sidebar__brand-link{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.nx-sidebar__brand-name{
    font-size:1.35rem;
    font-weight:800;
    letter-spacing:.12em;
}

.nx-sidebar__brand-vanity{
    color:var(--muted);
    font-size:.78rem;
}

.nx-sidebar__navigation{
    margin-top:24px;
}

.nx-sidebar__list{
    margin:0;
    padding:0;
    list-style:none;
}

.nx-sidebar__item{
    margin:4px 0;
}

.nx-sidebar__link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-radius:10px;
    color:var(--muted);
    transition:
        background-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.nx-sidebar__link:hover{
    background:var(--panel2);
    color:var(--text);
    transform:translateX(2px);
}

.nx-sidebar__icon{
    width:20px;
    height:20px;
}

.nx-sidebar__label{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}