:root{
  --sidebar-width:208px;
  --nav-font-size:14px;
  --nav-font-weight:500;
  --nav-item-height:40px;
  --nav-icon-size:18px;
  --nav-gap:10px;
  --nav-item-gap:0px;
  --logo-symbol-gap:5px;
  --content-font-size:14px;
  --border-color:#e3e7ed;
  --surface-hover:#f4f6f8;
  --surface-selected:#edf2fb;
}

/* Shared SELLOOP wordmark */
.mvp-brand{gap:var(--logo-symbol-gap);letter-spacing:normal}
.mvp-brand>b{letter-spacing:-.01em}
.mvp-brand>i{font-size:29px}

/* USER navigation */
.service-shell{grid-template-columns:var(--sidebar-width) 1fr}
.service-shell>aside{padding:20px 12px}
.service-brand .mvp-brand{margin:0 9px 28px}
.service-shell aside nav{gap:var(--nav-item-gap)}
.service-shell aside nav button{height:var(--nav-item-height);min-height:var(--nav-item-height);gap:var(--nav-gap);padding:0 10px;border-radius:8px;font-size:var(--nav-font-size);font-weight:var(--nav-font-weight);line-height:1.2}
.service-shell aside nav button i{width:20px;font-size:var(--nav-icon-size)}
.service-shell aside nav button:hover{background:var(--surface-hover)}
.service-shell aside nav button.active{background:var(--surface-selected)}
.service-account{padding:13px 9px 0}
.service-account div{font-size:13px;font-weight:500}
.service-account button{padding:5px 0;font-size:11px}

/* ADMIN navigation */
.admin-shell{grid-template-columns:var(--sidebar-width) 1fr}
.admin-shell>aside{padding:20px 12px}
.admin-brand{gap:var(--logo-symbol-gap);padding:0 9px 28px}
.admin-brand>i{font-size:29px}
.admin-brand span b{font-size:15px;letter-spacing:-.01em}
.admin-brand span small{font-size:9px;letter-spacing:normal;margin-top:1px}
.admin-shell aside nav{gap:var(--nav-item-gap)}
.admin-shell aside nav a{height:var(--nav-item-height);min-height:var(--nav-item-height);gap:var(--nav-gap);padding:0 10px;border-radius:8px;font-size:var(--nav-font-size);font-weight:var(--nav-font-weight);line-height:1.2}
.admin-shell aside nav a i{width:20px;font-size:var(--nav-icon-size)}
.admin-shell aside nav a:hover{background:rgba(255,255,255,.055)}
.admin-shell aside nav a.active{background:rgba(255,255,255,.085)}
.admin-profile{padding:13px 9px 0}
.admin-profile b{font-size:13px;font-weight:500}
.admin-profile span{font-size:10px;margin-top:2px}

@media(max-width:760px){
  .admin-shell>aside{width:var(--sidebar-width)}
}