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

body{
  background:#050505;
  color:white;
  overflow-x:hidden;
  transition:0.3s;
}

body.light{
  background:white;
  color:black;
}

.bg{
  position:fixed;
  width:100%;
  height:100%;
  z-index:-1;

  background:
  radial-gradient(circle at top,#ffffff11,transparent 40%),
  radial-gradient(circle at bottom,#66666611,transparent 40%);
}

.security-box{
  position:fixed;

  right:20px;
  top:20px;

  background:#111;

  border:1px solid #00ff88;

  padding:20px;

  border-radius:20px;

  z-index:999;

  box-shadow:0 0 30px #00ff8855;
}

.security-box h2{
  margin-bottom:10px;
  color:#00ff88;
}

.security-box span{
  color:#00ff88;
}

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

  padding:20px 5%;

  border-bottom:1px solid #ffffff22;
}

.logo-area{
  display:flex;
  align-items:center;
  gap:15px;
}

.logo{
  width:80px;
  height:80px;

  border-radius:50%;

  object-fit:cover;

  border:3px solid white;

  box-shadow:0 0 30px white;
}

.top-buttons{
  display:flex;
  gap:12px;
}

button{
  padding:12px 18px;

  border:none;

  border-radius:14px;

  cursor:pointer;

  background:white;

  color:black;

  font-weight:bold;

  transition:0.3s;
}

button:hover{
  transform:scale(1.05);
}

.layout{
  display:grid;
  grid-template-columns:320px 1fr;

  gap:20px;

  padding:20px 5%;
}

.sidebar{
  background:#111;

  border-radius:25px;

  padding:20px;

  max-height:90vh;

  overflow-y:auto;

  border:1px solid #ffffff22;
}

.templates{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:10px;

  margin-top:15px;
}

.template{
  width:100%;
  height:90px;

  object-fit:cover;

  border-radius:14px;

  cursor:pointer;

  transition:0.3s;
}

.template:hover{
  transform:scale(1.08);
}

.controls input{
  width:100%;

  margin-top:15px;

  padding:12px;

  border:none;

  border-radius:12px;

  background:#222;

  color:white;
}

.controls button{
  width:100%;
  margin-top:15px;
}

.main{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.canvas-box{
  background:#111;

  padding:20px;

  border-radius:25px;

  border:1px solid #ffffff22;
}

canvas{
  width:100%;

  border-radius:20px;

  background:black;

  border:3px solid white;

  transition:0.3s;
}

.features{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.music-panel{
  background:#111;

  padding:20px;

  border-radius:20px;

  border:1px solid #ffffff22;
}

.music-panel input{
  width:100%;

  margin-bottom:15px;

  padding:12px;

  border:none;

  border-radius:12px;

  background:#222;

  color:white;
}

.music-panel iframe{
  width:100%;
  height:250px;

  border:none;

  border-radius:15px;
}

.stickers{
  display:flex;
  gap:15px;

  background:#111;

  padding:15px;

  border-radius:20px;

  border:1px solid #ffffff22;
}

.sticker{
  width:70px;

  cursor:grab;

  transition:0.3s;
}

.sticker:hover{
  transform:scale(1.15);
}

.glow{
  box-shadow:0 0 50px white;
}

.blur{
  filter:blur(4px);
}

.zoom{
  transform:scale(1.05);
}

.rotate{
  transform:rotate(2deg);
}

.invert{
  filter:invert(1);
}

.mirror{
  transform:scaleX(-1);
}

.pixel{
  image-rendering:pixelated;
}

.rainbow{
  filter:hue-rotate(180deg);
}

.scan{
  filter:contrast(1.2);
}

.vintage{
  filter:sepia(1);
}

.shake{
  animation:shake 0.3s infinite;
}

@keyframes shake{

  0%{
    transform:translateX(0);
  }

  25%{
    transform:translateX(-5px);
  }

  50%{
    transform:translateX(5px);
  }

  75%{
    transform:translateX(-5px);
  }

  100%{
    transform:translateX(0);
  }

}

@media(max-width:1000px){

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

  .security-box{
    display:none;
  }

}