/* =====================================================
   OZONTECK.EU • PREMIUM LAYOUT SYSTEM
   ENTERPRISE WEB3 MASTER LAYOUT
===================================================== */

/* =====================================================
   APP LAYOUT
===================================================== */

.app-layout{

  width:100%;

  min-height:100vh;

}

/* =====================================================
   SIDEBAR PREMIUM
===================================================== */

.sidebar{

  position:fixed;

  top:14px;
  left:14px;
  bottom:14px;

  width:232px;

  padding:20px 14px;

  display:flex;

  flex-direction:column;

  background:
    linear-gradient(
      180deg,
      rgba(7,15,28,.94),
      rgba(4,9,18,.98)
    );

  border:
    1px solid rgba(255,255,255,.04);

  border-radius:30px;

  backdrop-filter:blur(18px);

  box-shadow:
    0 20px 60px rgba(0,0,0,.34),
    0 0 40px rgba(0,229,255,.04);

  overflow:hidden;

  z-index:999;

}

/* =====================================================
   LOGO
===================================================== */

.logo{

  padding:0 10px;

  margin-bottom:28px;

}

.logo strong{

  display:block;

  font-size:18px;

  font-weight:900;

  letter-spacing:-1px;

  color:#FFFFFF;

  line-height:1;

}

.logo span{

  display:block;

  margin-top:5px;

  font-size:10px;

  font-weight:700;

  letter-spacing:.8px;

  text-transform:uppercase;

  color:#64748B;

}

/* =====================================================
   NAVIGATION
===================================================== */

.nav{

  flex:1;

  display:flex;

  flex-direction:column;

  gap:6px;

}

/* =====================================================
   MENU ITEM
===================================================== */

.nav a{

  position:relative;

  display:flex;

  align-items:center;

  gap:12px;

  min-height:50px;

  padding:0 15px;

  border-radius:18px;

  border:
    1px solid transparent;

  color:#CBD5E1;

  font-size:14px;

  font-weight:700;

  letter-spacing:-0.2px;

  transition:all .22s ease;

}

/* =====================================================
   ICON
===================================================== */

.nav a i{

  width:18px;
  height:18px;

  display:flex;

  align-items:center;

  justify-content:center;

  color:#94A3B8;

  transition:all .22s ease;

}

/* =====================================================
   HOVER
===================================================== */

.nav a:hover{

  transform:translateX(2px);

  background:
    rgba(255,255,255,.025);

  border:
    1px solid rgba(255,255,255,.03);

  color:#FFFFFF;

}

.nav a:hover i{

  color:#D6F8FF;

}

/* =====================================================
   ACTIVE
===================================================== */

.nav a.active{

  background:
    linear-gradient(
      90deg,
      rgba(0,229,255,.08),
      rgba(0,184,255,.03)
    );

  border:
    1px solid rgba(0,229,255,.10);

  color:#FFFFFF;

  box-shadow:
    0 0 24px rgba(0,229,255,.04);

}

.nav a.active i{

  color:#00D9FF;

}

.nav a.active::before{

  content:"";

  position:absolute;

  left:0;
  top:18%;

  width:3px;
  height:64%;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      #00E5FF,
      #00B8FF
    );

}

/* =====================================================
   SIDEBAR FOOTER
===================================================== */

.sidebar-footer{

  margin-top:auto;

  padding-top:16px;

}

/* =====================================================
   LOGOUT BUTTON
===================================================== */

.logout-btn-sidebar{

  width:100%;

  min-height:52px;

  border:none;

  border-radius:18px;

  cursor:pointer;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.03)
    );

  border:
    1px solid rgba(255,255,255,.08);

  color:#F8FAFC;

  font-size:14px;

  font-weight:700;

  transition:all .22s ease;

}

.logout-btn-sidebar:hover{

  transform:translateY(-2px);

  border-color:
    rgba(0,229,255,.18);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.04)
    );

}

/* =====================================================
   MAIN
===================================================== */

.main{

  position:relative;
  z-index:2;

  margin-left:260px;

  width:auto;

  min-height:100vh;

  padding:12px 18px;

  overflow-x:hidden;

}

/* =====================================================
   CONTAINER
===================================================== */

.container{

  width:100%;

  max-width:1600px;

  margin:0 auto;

}

/* =====================================================
   PAGE HEADER
===================================================== */

.page-header{

  margin-bottom:22px;

}

/* =====================================================
   HERO PREMIUM
===================================================== */

.hero-section{

  position:relative;

  overflow:hidden;

  border-radius:34px;

  padding:26px;

  background:
    radial-gradient(
      circle at top right,
      rgba(0,229,255,.06),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(20,28,48,.94) 0%,
      rgba(7,12,24,.99) 50%,
      rgba(5,10,20,1) 100%
    );

  border:
    1px solid rgba(0,229,255,.10);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 20px 60px rgba(0,0,0,.42),
    0 0 50px rgba(0,229,255,.05);

  backdrop-filter:blur(14px);

}

.hero-section::before{

  content:"";

  position:absolute;

  top:-180px;
  right:-180px;

  width:420px;
  height:420px;

  background:
    radial-gradient(
      circle,
      rgba(0,229,255,.14),
      transparent 72%
    );

  pointer-events:none;

  opacity:.9;

}

/* =====================================================
   HERO CONTENT
===================================================== */

.hero-content{

  position:relative;

  z-index:2;

}

/* =====================================================
   GRID SYSTEM
===================================================== */

.grid{

  display:grid;

  gap:20px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

/* =====================================================
   SECTION
===================================================== */

.section{

  margin-bottom:20px;

}

/* =====================================================
   MOBILE CLEAN
===================================================== */

@media(max-width:768px){

  .sidebar{
    display:none;
  }

  .main{

    margin-left:0;

    width:100%;

    max-width:100%;

    padding:18px 18px 84px;

  }

  .grid-2,
  .grid-3,
  .grid-4{

    grid-template-columns:1fr;

  }

}



/* =====================================================
   PARTNER ENTERPRISE FINAL LAYOUT
===================================================== */

/* ÁREA PRINCIPAL */

.main{

  position:relative !important;
  z-index:2 !important;

  margin-left:260px !important;

  width:auto !important;
  max-width:none !important;

  min-height:100vh !important;

  padding:10px 16px !important;

  overflow-x:hidden !important;

}

/* CONTAINER CENTRAL */

.container{

  width:100% !important;

  max-width:1280px !important;

  margin:0 auto !important;

}

/* REMOVE ESPAÇOS EXCESSIVOS */

.page-header{

  margin-bottom:10px !important;

}

.section{

  margin-bottom:10px !important;

}

.hero-section{

  padding:18px !important;

}

/* TRAVA A LARGURA DA TELA */

html,
body{

  overflow-x:hidden !important;

}

/* FIXA A ÁREA ÚTIL */

.app-layout{

  width:100% !important;

  min-height:100vh !important;

  overflow-x:hidden !important;

}

/* DESKTOP */

@media(min-width:1200px){

  .container{

    max-width:1280px !important;

  }

}

/* =====================================================
   MOBILE NAV FIX
===================================================== */

/* Desktop */

.mobile-bottom-nav{
  display:none !important;
}

/* Mobile */

@media(max-width:768px){

  .mobile-bottom-nav{

    display:flex !important;

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:72px;

    background:
      rgba(5,12,25,.98);

    backdrop-filter:blur(20px);

    border-top:
      1px solid rgba(255,255,255,.06);

    z-index:9999;
  }

  .mobile-bottom-nav a{

    flex:1;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:4px;

    color:#8ea2bd;

    text-decoration:none;

    font-size:11px;

    font-weight:600;
  }

  .mobile-bottom-nav a.active{

    color:#14d8ff;
  }

  .mobile-bottom-nav svg{

    width:20px;
    height:20px;
  }

  /* espaço para menu inferior */

  body{

    padding-bottom:80px;
  }

}

/* =====================================================
   PARTNER SCALE PATCH V1
   MAIS ÁREA ÚTIL • DESKTOP
===================================================== */

@media(min-width:1200px){

  /* container mais largo */

  .container{

    max-width:95% !important;

    width:95% !important;

  }

  /* recupera espaço perdido */

  .main{

    margin-left:248px !important;

    padding-left:18px !important;

    padding-right:18px !important;

  }

}

/* telas muito grandes */

@media(min-width:1600px){

  .container{

    max-width:1500px !important;

  }

}


/* =====================================================
   OZONCORE MASTER WIDTH FIX
===================================================== */

@media(min-width:1200px){

  .container{

    max-width:1280px !important;

    width:100% !important;

    margin:0 auto !important;

  }

  .main{

    padding-left:24px !important;

    padding-right:24px !important;

  }

}

/* =====================================================
   TITULO MOBILE
===================================================== */

@media(max-width:768px){

  h1.partner-title{

    font-size:20px !important;

    line-height:1 !important;

    margin-top:6px !important;

    margin-bottom:4px !important;

    letter-spacing:-0.5px !important;

  }

  .partner-subtitle{

    font-size:12px !important;

    line-height:1.4 !important;

  }

}