*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial;
}

html,body{
  height:100%;
  overflow-x:hidden; /* PAGE DOES NOT SCROLL */
  background:#0b1220;
}



/* APP */
.app{
  min-height:100vh;
  min-height:100dvh;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  color:white;
}



.container{
  height:100%;
  max-width:900px;
  margin:auto;
  padding:22px 16px 12px 16px;
  display:flex;
  flex-direction:column;
}

/* ===== TOP AREA ===== */
.top-area{
  position:relative;
  height:110px;
}

/* PROFILE */
.profile{
  position:absolute;
  width:100%;
  text-align:center;
  transition:.5s ease;
}

.profile.hide{
  opacity:0;
  transform:translateY(-25px);
}

/* HEADER */
.header{
  position:absolute;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  opacity:0;
  transform:translateY(-25px);
  transition:.5s ease;
}

.header.show{
  opacity:1;
  transform:translateY(0);
}

/* AVATAR */
.avatar{
  width:80px;
  height:80px;
  border-radius:50%;
}

.avatar-small{
  width:36px;
  height:36px;
  border-radius:50%;
}

/* NAME FIX */
#name, #nameTop{
  color:white;
  font-weight:bold;
  z-index:10;
}

/* ===== TABS ===== */
.tabs{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:6px;
}

.tab{
  padding:10px;
  border:none;
  background:none;
  color:rgba(255,255,255,0.7);
  cursor:pointer;
  transition:.2s;
}

.tab.active{
  color:white;
}

.tab:hover{
  color:#60a5fa;
  transform:translateY(-2px);
}

/* INDICATOR */
.tab-indicator{
  position:absolute;
  bottom:0;
  left:0;
  width:50%;
  height:3px;
  background:#3b82f6;
  transition:.3s;
}

/* ===== CONTENT ===== */
.content-wrapper{
  flex:1;
  padding-top: 1rem;
  position:relative;
}

/* SCROLL FIX */
.scroll-area{
  height:100%;
  padding-right:4px;
}

/* ANIMATION */
.tab-content{
  position:absolute;
  width:100%;
  opacity:0;
  transform:translateX(40px);
  pointer-events:none;
  transition:.3s ease;
}

.tab-content.active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
  position:relative;
}

/* ===== PORTFOLIO ===== */
#portfolio{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* FAST HOVER EFFECT */
.link-btn{
  width:100%;
  background:rgba(255,255,255,0.06);
  border-radius:16px;
  padding:14px;
  color:white;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:.12s ease;
}

.link-btn:hover{
  transform:scale(1.03);
  background:rgba(59,130,246,0.2);
}

.link-btn img{
  position:absolute;
  left:12px;
  width:42px;
  height:42px;
  border-radius:10px;
}

/* ===== TOOLS ===== */
#toolsList{
  display:grid;
  gap:12px;
}

.card{
  background:rgba(255,255,255,0.06);
  border-radius:16px;
  max-width: 350px;
  overflow:hidden;
  color:white;
  text-decoration:none;
  transition:.12s ease;
}

.card:hover{
  transform:scale(1.03);
  background:rgba(59,130,246,0.2);
}

.card img{
  width:100%;
  height:150px;
  object-fit:fill;
}

.card-content{
  padding:10px;
}

/* SEARCH */
.search-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:10px;
}

#search{
  width:100%;
  max-width:500px;
  padding:10px;
  border-radius:10px;
  border:none;
  background:rgba(255,255,255,0.08);
  color:white;
}