*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;

    background:#090d16;
    color:#f5f7fb;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body{
    min-height:100vh;
}

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

button,
input{
    font:inherit;
}

.client-shell{
    min-height:100vh;

    display:grid;
    grid-template-columns:245px minmax(0,1fr);
}


/* SIDEBAR */

.sidebar{
    min-height:100vh;

    position:sticky;
    top:0;

    display:flex;
    flex-direction:column;

    padding:24px 17px;

    border-right:1px solid #242b3b;

    background:#0c111b;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;

    padding:0 8px;
    margin-bottom:36px;
}

.brand-icon{
    width:35px;
    height:35px;

    display:grid;
    place-items:center;

    border-radius:10px;

    background:linear-gradient(
        135deg,
        #7254ec,
        #9a73ff
    );

    font-size:14px;
    font-weight:900;
}

.brand strong{
    font-size:17px;
}

.brand em{
    color:#8d6cf4;
    font-style:normal;
}

.sidebar-label{
    padding:0 10px;
    margin-bottom:9px;

    color:#626d83;

    font-size:8px;
    font-weight:800;

    letter-spacing:.12em;
}

.sidebar-label.second{
    margin-top:24px;
}

.sidebar nav{
    display:grid;
    gap:4px;
}

.nav-item{
    min-height:42px;

    display:flex;
    align-items:center;

    gap:11px;

    padding:8px 10px;

    border:1px solid transparent;
    border-radius:9px;

    color:#8691a7;

    font-size:10px;

    transition:.16s ease;
}

.nav-item:hover{
    color:#fff;
    background:#121824;
}

.nav-item.active{
    border-color:#342d52;

    background:#171526;
    color:#fff;
}

.nav-icon{
    width:24px;
    height:24px;

    display:grid;
    place-items:center;

    border:1px solid #30384a;
    border-radius:7px;

    font-size:9px;
    font-weight:800;
}

.nav-item.active .nav-icon{
    border-color:#59498d;

    color:#a88ff6;
    background:#1e1932;
}

.nav-item small{
    margin-left:auto;
}

.sidebar-bottom{
    display:grid;
    gap:8px;

    margin-top:auto;
    padding-top:20px;
}

.admin-link,
.back-site{
    padding:10px;

    border:1px solid #293144;
    border-radius:9px;

    color:#8792a7;

    font-size:9px;
}

.admin-link{
    display:flex;
    justify-content:space-between;

    color:#b6a4f9;

    background:#151327;
}


/* MAIN */

.main{
    min-width:0;
}

.topbar{
    height:72px;

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

    padding:0 32px;

    border-bottom:1px solid #242b3b;

    background:
        rgba(9,13,22,.92);
}

.topbar-context{
    color:#798399;

    font-size:8px;
    font-weight:800;
    letter-spacing:.12em;
}

.top-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.top-action{
    padding:9px 12px;

    border:1px solid #293144;
    border-radius:8px;

    font-size:9px;
}

.avatar{
    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    border:1px solid #4c4076;
    border-radius:9px;

    background:#181529;

    color:#a891ef;

    font-size:10px;
    font-weight:900;
}

.mobile-menu{
    display:none;

    border:0;
    background:none;
    color:#fff;
}


/* PAGE */

.page{
    width:min(1280px,100%);

    margin:0 auto;

    padding:32px;
}

.hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:25px;

    margin-bottom:26px;
}

.eyebrow{
    display:block;

    margin-bottom:7px;

    color:#947cef;

    font-size:8px;
    font-weight:900;

    letter-spacing:.12em;
}

.hero h1,
.page-header h1{
    margin:0;

    font-size:29px;
    line-height:1.15;
}

.hero p,
.page-header p{
    max-width:650px;

    margin:10px 0 0;

    color:#818ca1;

    font-size:10px;
    line-height:1.6;
}

.page-header{
    margin-bottom:23px;
}


/* BUTTON */

.btn{
    min-height:39px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 15px;

    border:1px solid #333b4f;
    border-radius:9px;

    background:#111722;
    color:#fff;

    font-size:9px;
    font-weight:700;

    cursor:pointer;
}

.btn.primary{
    border-color:#8867ef;

    background:#8867ef;
}

.btn.full{
    width:100%;
    margin-top:18px;
}


/* STATS */

.stats-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:11px;

    margin-bottom:16px;
}

.stat-card{
    min-height:128px;

    padding:18px;

    border:1px solid #293144;
    border-radius:13px;

    background:#101620;
}

.stat-card>span{
    color:#778297;

    font-size:7px;
    font-weight:800;

    letter-spacing:.08em;
}

.stat-card>strong{
    display:block;

    margin-top:12px;

    font-size:27px;
}

.stat-card>small{
    display:block;

    margin-top:8px;

    color:#667187;

    font-size:8px;
}


/* CARDS */

.dashboard-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1.6fr)
        minmax(280px,.7fr);

    gap:16px;

    margin-bottom:16px;
}

.card{
    padding:20px;

    border:1px solid #293144;
    border-radius:14px;

    background:#101620;
}

.card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:18px;

    margin-bottom:17px;
}

.card-head h2{
    margin:0;

    font-size:14px;
}

.card-head a{
    color:#9884e9;

    font-size:8px;
}


/* SERVICES */

.service-list{
    display:grid;
    gap:7px;
}

.service-row{
    display:flex;
    align-items:center;

    gap:11px;

    padding:11px;

    border:1px solid #282f41;
    border-radius:10px;

    background:#0c121c;
}

.service-icon,
.service-big-icon{
    width:34px;
    height:34px;

    flex:0 0 auto;

    display:grid;
    place-items:center;

    border:1px solid #493e72;
    border-radius:9px;

    color:#a58ef0;
    background:#19162a;

    font-size:9px;
    font-weight:900;
}

.service-main{
    min-width:0;
    flex:1;
}

.service-main strong{
    display:block;

    font-size:9px;
}

.service-main small{
    display:block;

    margin-top:3px;

    overflow:hidden;
    text-overflow:ellipsis;

    color:#707b90;

    font-size:7px;
}


/* STATUS */

.status{
    display:inline-flex;
    align-items:center;

    gap:5px;

    padding:4px 7px;

    border:1px solid #353d50;
    border-radius:999px;

    color:#8a94a8;

    font-size:7px;
    font-weight:700;
}

.status i{
    width:5px;
    height:5px;

    border-radius:50%;
    background:#798397;
}

.status.active,
.status.paid,
.status.completed{
    border-color:
        rgba(88,209,139,.28);

    color:#69d592;
}

.status.active i,
.status.paid i,
.status.completed i{
    background:#59d18a;
}

.status.pending,
.status.processing,
.status.open{
    border-color:
        rgba(218,172,82,.3);

    color:#dcb164;
}

.status.pending i,
.status.processing i,
.status.open i{
    background:#d6a64e;
}

.status.cancelled,
.status.canceled,
.status.suspended{
    border-color:
        rgba(225,92,104,.3);

    color:#df7a83;
}

.status.cancelled i,
.status.canceled i,
.status.suspended i{
    background:#dd6672;
}


/* PANEL */

.panel-state,
.panel-hero{
    display:flex;
    align-items:center;

    gap:14px;
}

.panel-big-icon{
    width:48px;
    height:48px;

    flex:0 0 auto;

    display:grid;
    place-items:center;

    border:1px solid #584895;
    border-radius:12px;

    background:#1a172e;

    color:#aa94f4;

    font-size:15px;
    font-weight:900;
}

.panel-big-icon.inactive{
    border-color:#333c50;

    background:#151a24;
    color:#6f7a8e;
}

.panel-online,
.panel-offline{
    display:flex;
    align-items:center;
    gap:5px;

    color:#66d590;

    font-size:7px;
    font-weight:800;
}

.panel-online i,
.panel-offline i{
    width:6px;
    height:6px;

    border-radius:50%;
    background:#59d18a;
}

.panel-offline{
    color:#818ca1;
}

.panel-offline i{
    background:#747f93;
}

.panel-state h3,
.panel-hero h2{
    margin:7px 0 0;

    font-size:12px;
}

.panel-state p,
.panel-hero p{
    margin:5px 0;

    color:#798499;

    font-size:8px;
    line-height:1.5;
}

.panel-state small,
.panel-hero small{
    color:#657186;
    font-size:7px;
}

.panel-full{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;

    min-height:180px;
}


/* TABLE */

.orders-card{
    margin-bottom:20px;
}

.table-head,
.table-row{
    display:grid;

    grid-template-columns:
        1.2fr 1.5fr .8fr .7fr;

    gap:15px;

    align-items:center;
}

.table-head{
    padding:0 11px 8px;

    color:#69758a;

    font-size:7px;
    font-weight:800;
}

.table-row{
    padding:12px 11px;

    border-top:1px solid #242c3c;

    font-size:8px;
}

.table-row>strong:last-child{
    text-align:right;
}


/* EMPTY */

.empty-state{
    padding:35px 15px;

    text-align:center;
}

.empty-icon{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    margin:0 auto 11px;

    border:1px solid #443969;
    border-radius:10px;

    color:#a28bea;
}

.empty-state h3{
    margin:0;

    font-size:11px;
}

.empty-state p{
    margin:7px auto 14px;

    max-width:400px;

    color:#727d92;

    font-size:8px;
}


/* SERVICES PAGE */

.services-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:11px;
}

.service-card{
    padding:16px;

    border:1px solid #293144;
    border-radius:12px;

    background:#0c121c;
}

.service-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.service-card h3{
    margin:14px 0 0;

    font-size:11px;
}

.service-card p{
    margin:5px 0 18px;

    color:#747f94;

    font-size:8px;
}

.service-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-top:12px;

    border-top:1px solid #262e3f;

    font-size:7px;
}

.service-meta span{
    color:#687389;
}


/* GENERIC LIST */

.generic-list{
    display:grid;
}

.generic-row{
    min-height:58px;

    display:grid;
    grid-template-columns:
        minmax(0,1.6fr)
        .7fr
        .5fr;

    align-items:center;

    gap:15px;

    padding:11px 4px;

    border-bottom:1px solid #252d3d;
}

.generic-row:last-child{
    border-bottom:0;
}

.generic-row>div strong,
.generic-row>div small{
    display:block;
}

.generic-row>div strong{
    font-size:9px;
}

.generic-row>div small{
    margin-top:4px;

    color:#6f7a90;

    font-size:7px;
}

.generic-row>strong:last-child{
    text-align:right;
}


/* PROFILE */

.profile-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:15px;
}

.info-list{
    display:grid;
}

.info-list>div{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:12px 0;

    border-bottom:1px solid #262e3e;
}

.info-list>div:last-child{
    border-bottom:0;
}

.info-list span{
    color:#737e93;

    font-size:8px;
}

.info-list strong{
    font-size:8px;
}

.muted{
    color:#7a859a;

    font-size:9px;
    line-height:1.6;
}


/* LOADING */

.nx-loading-screen{
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;

    gap:8px;
}

.nx-loading-logo{
    width:45px;
    height:45px;

    display:grid;
    place-items:center;

    border-radius:12px;

    background:#8968ef;

    font-weight:900;
}

.nx-loading-screen span{
    color:#707b90;

    font-size:8px;
}


/* FATAL */

.fatal{
    max-width:650px;

    margin:100px auto;

    padding:30px;
}

.fatal-icon{
    width:43px;
    height:43px;

    display:grid;
    place-items:center;

    margin-bottom:18px;

    border:1px solid #633943;
    border-radius:11px;

    background:#251317;
    color:#e6727d;

    font-weight:900;
}

.fatal>span{
    color:#937cea;

    font-size:8px;
    font-weight:900;

    letter-spacing:.12em;
}

.fatal h1{
    margin:10px 0;

    font-size:27px;
}

.fatal p{
    color:#818ca1;

    font-size:9px;
}

.fatal .btn{
    margin-right:7px;
    margin-top:10px;
}


/* RESPONSIVE */

@media(max-width:1000px){

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

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

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

}

@media(max-width:760px){

    .client-shell{
        grid-template-columns:1fr;
    }

    .sidebar{
        width:245px;

        position:fixed;
        z-index:100;

        left:-260px;

        transition:.2s ease;

        box-shadow:
            25px 0 50px
            rgba(0,0,0,.4);
    }

    body.menu-open .sidebar{
        left:0;
    }

    .mobile-menu{
        display:block;
    }

    .topbar{
        padding:0 18px;
    }

    .page{
        padding:22px 16px;
    }

    .hero{
        align-items:flex-start;
        flex-direction:column;
    }

    .services-grid,
    .profile-grid{
        grid-template-columns:1fr;
    }

    .panel-full{
        align-items:flex-start;
        flex-direction:column;
    }

}

@media(max-width:520px){

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

    .table-head{
        display:none;
    }

    .table-row{
        grid-template-columns:1fr auto;
    }

    .table-row>span:nth-child(2){
        grid-column:1/-1;
    }

    .generic-row{
        grid-template-columns:1fr auto;
    }

}


/* =========================================================
   NEXORAHOST CLIENT — TYPOGRAPHIE NORMALE
   ========================================================= */

html{
    font-size:16px;
}

body{
    font-size:14px;
    line-height:1.5;
}


/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

.brand strong{
    font-size:20px;
}

.sidebar-label{
    font-size:11px;
}

.nav-item{
    font-size:14px;
}

.nav-icon{
    font-size:12px;
}

.admin-link,
.back-site{
    font-size:13px;
}


/* ---------------------------------------------------------
   TOPBAR
   --------------------------------------------------------- */

.topbar-context{
    font-size:11px;
}

.top-action{
    font-size:13px;
}

.avatar{
    font-size:13px;
}


/* ---------------------------------------------------------
   TITRES
   --------------------------------------------------------- */

.eyebrow{
    font-size:11px;
}

.hero h1,
.page-header h1{
    font-size:34px;
    line-height:1.15;
}

.hero p,
.page-header p{
    font-size:14px;
    line-height:1.6;
}


/* ---------------------------------------------------------
   BOUTONS
   --------------------------------------------------------- */

.btn{
    min-height:44px;

    padding-left:18px;
    padding-right:18px;

    font-size:13px;
}


/* ---------------------------------------------------------
   STATISTIQUES
   --------------------------------------------------------- */

.stat-card>span{
    font-size:11px;
}

.stat-card>strong{
    font-size:32px;
}

.stat-card>small{
    font-size:12px;
}


/* ---------------------------------------------------------
   CARTES
   --------------------------------------------------------- */

.card-head h2{
    font-size:18px;
}

.card-head a{
    font-size:12px;
}


/* ---------------------------------------------------------
   SERVICES
   --------------------------------------------------------- */

.service-main strong{
    font-size:14px;
}

.service-main small{
    font-size:12px;
}

.service-icon,
.service-big-icon{
    font-size:13px;
}


/* ---------------------------------------------------------
   STATUTS
   --------------------------------------------------------- */

.status{
    font-size:11px;
}


/* ---------------------------------------------------------
   PANEL
   --------------------------------------------------------- */

.panel-online,
.panel-offline{
    font-size:11px;
}

.panel-state h3,
.panel-hero h2{
    font-size:17px;
}

.panel-state p,
.panel-hero p{
    font-size:13px;
}

.panel-state small,
.panel-hero small{
    font-size:11px;
}


/* ---------------------------------------------------------
   TABLEAUX
   --------------------------------------------------------- */

.table-head{
    font-size:11px;
}

.table-row{
    font-size:13px;
}


/* ---------------------------------------------------------
   ÉTATS VIDES
   --------------------------------------------------------- */

.empty-state h3{
    font-size:16px;
}

.empty-state p{
    font-size:13px;
}


/* ---------------------------------------------------------
   CARTES SERVICES
   --------------------------------------------------------- */

.service-card h3{
    font-size:16px;
}

.service-card p{
    font-size:13px;
}

.service-meta{
    font-size:12px;
}


/* ---------------------------------------------------------
   LISTES
   --------------------------------------------------------- */

.generic-row>div strong{
    font-size:14px;
}

.generic-row>div small{
    font-size:12px;
}


/* ---------------------------------------------------------
   PROFIL
   --------------------------------------------------------- */

.info-list span{
    font-size:13px;
}

.info-list strong{
    font-size:13px;
}

.muted{
    font-size:13px;
}


/* ---------------------------------------------------------
   CHARGEMENT / ERREURS
   --------------------------------------------------------- */

.nx-loading-screen span{
    font-size:13px;
}

.fatal>span{
    font-size:11px;
}

.fatal h1{
    font-size:32px;
}

.fatal p{
    font-size:14px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:760px){

    .hero h1,
    .page-header h1{
        font-size:28px;
    }

    .nav-item{
        font-size:14px;
    }

}